この記事の例では、ショッピングカートの簡単な追加と削除を実現するためのJSの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 1. 入力ボックスに加算と減算の結果を書き込みます。 2. プラスボタンとマイナスボタンはボタンボタンを使用して実装されます 3. js を使用して、入力ボックスの値として i の値を制御します。 達成された効果: 完全なコードは次のとおりです。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8" /> <タイトル></タイトル> <スタイル> 体{ マージン: 0; パディング: 0; } 。箱{ 境界線: 赤実線 1px; 高さ: 40px; 幅: 200ピクセル; マージン: 200px 自動; テキスト配置: 中央; パディング上部: 20px; } .box 入力{ 幅: 40px; テキスト配置: 中央; } #お金{ 境界線: なし; テキスト配置: 左; 左マージン: 2px; } ul{ リストスタイル: なし; } ul li{ 表示: ブロック; フロート: 左; 垂直位置合わせ: 中央; } </スタイル> <スクリプト> window.onload = 関数(){ var plus = document.getElementById("plus"); var i = document.getElementById("text").value; var 減算 = document.getElementById("減算"); var お金 = document.getElementById("お金").value; plus.onclick = 関数(){ 私は++; document.getElementById("テキスト").value = i; document.getElementById("money").value = i*money; } 減算.onclick = 関数(){ もし (i>0) { 私 - ; document.getElementById("テキスト").value = i; document.getElementById("money").value = i*money; } それ以外{ 私=0; document.getElementById("テキスト").value = i; document.getElementById("money").value = i*money; } } } </スクリプト> </head> <本文> <ul class="box"> <li><button id="plus">+</button></li> <li><入力タイプ="テキスト" id="テキスト" 値="1"/></li> <li><button id="減算">-</button></li> <li> ¥<input type="text" id="money" value="88"/></li> </ul> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CentOS での Django プロジェクトのデプロイに関する詳細なチュートリアル
>>: MySql Installer 8.0.18 画像とテキストによるビジュアル インストール チュートリアル
目次(I) Workbenchを使用してデータベースを操作する①データベースを作成する② データベー...
1. SELECT句を使用して複数のテーブルをクエリするSELECT フィールド名 FROM tab...
リンクのターゲット属性は、リンクが開く場所を決定します。その値は通常、_blank、_self、_p...
なぜ Nexus プライベート サーバーを構築する必要があるのでしょうか。その理由は非常に簡単です。...
目次1. 要素オフセットシリーズ2. 要素表示領域クライアントシリーズ3. 要素スクロールシリーズ1...
序文ほとんどの方がMySQLとインデックスを使用したことがあると思いますが、適切なインデックスを作成...
導入Docker コミュニティは、さまざまなユースケースを処理するのに役立つ多くのオープンソース ツ...
1. mysql-8.0.21-winx64を解凍する2. 環境変数を設定し、アドレスをbinフォル...
検索テキストボックスにテキストを設定すると、フォーカスを外すと位置がジャンプしますコードをコピーコー...
Docker に Tomcat をインストールする場合、大きなファイルをダウンロードするときなど、場...
この記事の例では、ショッピングカート機能を実装するためのvuexの具体的なコードを参考までに共有して...
現在、WeChatパブリックアカウントの運用活動が多く、写真を生成する必要があります。生成された写真...
目次序文1. データベースの基礎知識1. データベースとは何ですか? 2. データベースの分類3. ...
目次1. はじめに2. 利点3. 使用手順1. Vuexをインストールする2. Vuexを参照する3...
会社の基準により、特定のユーザーだけに Linux システムへのアクセスを許可することができます。あ...