我想根据价格和数量得到3个项目的总和

问题描述 投票:-1回答:1

我想根据价格和数量在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:[email protected]">[email protected]</a>.</p>
      </footer>

</body>
</html>
javascript html5
1个回答
0
投票

你可以使用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()”,然后在关闭之前将脚本标记移动到文件末尾

© www.soinside.com 2019 - 2024. All rights reserved.