我想根據價格和數量獲得 3 件商品的總和

Question

我想根據價格和數量將總金額顯示在我的 3 個項目的文檔底部。 例如，商品 1 價值 5 美元，商品 2 價值 7 美元，商品 3 價值 11 美元。 我需要一個函數並編輯我的 html 輸入標簽，這樣我就可以顯示全部總數，如果我在哪里選擇每個項目的不同數量。

這是我到目前為止：

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="style.css"> <script src="app.js"></script> </head> <body> <h1>Marios Pest Control</h1> <form> <ul class="myList"> <img src="Blue_Goomba_SMWU.png" class="imgCenter"> <li>Goombas: 5 Coins (ea.)<l1> <br> Total Number: <input id="goombasInp" type="number" name="Total Number Of"> <button>add</button> <br> <br> <br> <br> <br> <br> <br> <br> <br> <img src="635-6354796_mkdd-bob-omb-bomba-de-tiempo-virus.png"> <li>Bob-ombs: 7 Coins (ea.)<li> Total Number: <input id="bob-ombsInp" type="number" name="Total Number Of"> <button>add</button> <br> <br> <br> <br> <br> <br> <br> <br> <br> <img src="1200px-DeepCheepNSLU.png"> <li>Cheep-cheeps: 11 Coins (ea.)</li> Total Number: <input id="cheep-cheepsInp" type="number" name="Total Number Of"> <button>add</button> <br> <br> <br> <br> <br> <br> <br> <br> <br> </ul> <p id="myP">Click Submit To Get The Total:</p> <button id="wrapper" onclick="myFunction()">Add Total</button> </form> <footer class="myFooter"> <p>Marios Pest Control</p> 2410 Birch Ave Lubbock, Tx 79404 <p>url: <a href="mariospestconrol.com">mariospestconrol.com </a> <p>email: <a href="mailto:someone@example.com">someone@example.com</a>.</p> </footer> </body> </html>

Answer 1

您可以使用 myFunction() 的這個變體來完成您的工作：

function myFunction(event) {
  event.preventDefault();
  let goombas = document.getElementById("goombasInp");
  let bobombs = document.getElementById("bob-ombsInp");
  let cheeps = document.getElementById("cheep-cheepsInp");

  goombas = goombas.value * 5;
  bobombs = bobombs.value * 7;
  cheeps = cheeps.value * 11;

  document.getElementById("myP").innerHTML += goombas+bobombs+cheeps;
}

document.querySelector("button#wrapper").addEventListener('click', myFunction);

我會建議/建議您從按鈕中刪除：onclick="myFunction()"，並在關閉之前在文件末尾移動您的腳本標記

我想根據價格和數量獲得 3 件商品的總和

問題描述

1 個解決方案

解決方案1
0 2019-03-08 18:57:31

我想根據價格和數量獲得 3 件商品的總和

問題描述

1 個解決方案

解決方案1 0 2019-03-08 18:57:31

解決方案1
0 2019-03-08 18:57:31