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 个答案: