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