この記事の例では、ショッピングカートの簡単な追加と削除を実現するための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 画像とテキストによるビジュアル インストール チュートリアル
プロジェクトでは、フォーム テストが頻繁に発生します。単一のフォーム テストについては、詳細な紹介が...
序文元のプロジェクトは、パブリックネットワークgitlabに配置されていました。セキュリティ上の理由...
スーパーバイザー紹介Supervisor は、Python で開発されたクライアント/サーバー サー...
目次概要ファイル記述子同期、非同期、Promise同期書き込み非同期書き込み(推奨)約束の書き方...
「Enter != Submit」問題を実装するには、通常、「ボタンの種類」と「入力ボックスの数」か...
問題の説明: MySQL に中国語の文字を挿入する場合、または MySQL では中国語の文字が正常に...
目次概要1. URL経由でダウンロード2. aタグのダウンロード属性とblobコンストラクタを組み合...
目次1. forループ2. 二重の for ループ3. whileループ4. dowhileループ5...
目次序文1. 準備 - サーバーとnginxの使用1. サーバーを準備する2. nginxをインスト...
Dockerfileの作成expressによって自動的に作成されたディレクトリを例にとると、ディレク...
この記事は参考までにmysql 8.0.19 winx64.zipのインストールチュートリアルを記録...
CSSスタイルファイルで指定 #class td /*表のテキストを左右上下に揃えるように設定する*...
1. 新しいUIプロジェクトを作成するまず、私たちの UI は ColorUI に基づいています。C...
1. Dockerの紹介Docker は Linux オペレーティングシステムの一部の機能をベースに...
今日、Dockerfile を使用してイメージを作成したときに問題が発生し、イメージの実行後にコンテ...