为什么我的输入在浏览器中运行时没有更新？ - Javascript
[英]Why does my input not update when I run it in my browser? - Javascript
问题描述
I'm learning basic Javascript, and I'm trying to make a tip calculator.
我正在学习基本的 Javascript，我正在尝试制作一个小费计算器。
I got most of my program done, but when it's running my values they are stuck on 0. I identified by id and made sure that they are the right names and ran them in console log.我完成了大部分程序，但是当它运行我的值时，它们被卡在 0 上。我通过 id 识别并确保它们是正确的名称并在控制台日志中运行它们。 Upon running it the alert says "enter valid numbers" , so I know that nothing happens to it.运行它时，警报说“输入有效数字” ，所以我知道它没有任何反应。
I looked at similar programs and see that there's no issue even though much of the code is similar.我查看了类似的程序，发现即使大部分代码都相似，也没有问题。 This might be a simple solution but any help would be appreciated!这可能是一个简单的解决方案，但任何帮助将不胜感激！
var bill = document.getElementById("cost").value; var tip = document.getElementById('tip').value; function totalBill() { if (tip >= 1) { tip = tip / 100; } if (bill === "" || tip === 0) { alert("enter valid numbers") return; } var total = Math.round((bill * tip)); total.toFix(2); document.getElementById('totalText').innerHTML = total; } document.getElementById("c").onclick = function() { totalBill(); };
body { font-family: Roboto; background: white; /* fallback for old browsers */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } #calculator { height: 350px; width: 360px; margin: 0px auto; background-color: yellow; padding: 10px; text-align: center; } input { font-weight: bold; } h1 { text-align: center; background: #B03060; color: white; margin: 0; padding: 10px 100px; text-transform: uppercase; font-size: 18px; font-weight: normal; border-top-left-radius: ; border-top-right-radius: 20px; } button { text-transform: uppercase; font-weight: bold; display: block; margin: 30px auto; background: red; border-radius: 2px; width: 200px; height: 50px; font-size: 14px; color: white; } button:hover { transition: 1s; background: white; color: black; } #result { text-align: center; } p { text-align: center; padding-left: 20px; }
<html lang="en" dir="ltr"> <link rel="stylesheet" href="style.css"> <body> <div id="contain"> <h1> <meta charset="utf-8"> <title>calculator</title> How much is the tip? </h1> <div id="calculator"> <form> <p>How much was your meal?</p> <p>$<input id="cost" type="text" placeholder="Enter Cost"></p> <p>How much do you want to tip?</p> <p><input id="tip" type="text" placeholder="Enter percentage">%</p> <button type="button" id="c">Calculate!</button> </form> </div> </div> <div id="result"> <sup>$</sup><span id="totalText">0.00</span> </div> </body> </html>
1 个解决方案
解决方案1
2 已采纳 2020-01-05 23:55:43
You need to move your .getElementById assignments inside your function, so that they're updated each time you run the function - right now you're only getting the .value() once;您需要将您的.getElementById分配移动到您的函数中，以便在您每次运行该函数时更新它们 - 现在您只获得.value()一次； when the page is loaded, and those inputs are empty当页面加载时，这些输入是空的
When you get these values in your function, they're going to be Strings.当您在函数中获得这些值时，它们将是字符串。 To use operators like + on them without unexpected effects (joining the Strings together) you should turn them into Numbers - You could use either .parseFloat() to keep decimals, or .parseInt() to get just the interger要在没有意外效果的情况下使用+运算符（将字符串连接在一起），您应该将它们转换为数字 - 您可以使用.parseFloat()来保留小数，或使用.parseInt()来获取整数
// Assuming an input of '12.50'
document.getElementById("cost").value // Returns '12.50'
parseFloat(document.getElementById("cost").value) // Returns 12.50
parseInt(document.getElementById("cost").value, 10) // Returns 12
The second , 10) in parseInt is specifying the base - Don't forget that or people will hate you parseInt的第二个, 10)是指定基数- 不要忘记，否则人们会讨厌你
Finally, your Math was wrong for calculating the total paid;最后，你的数学计算支付的总额是错误的； It should add the tip amount onto the total, and then display this value它应该将小费金额添加到总数中，然后显示此值
There are other small issues and imperfections, but I leave those as a an exercise to the reader还有其他一些小问题和不完善之处，但我将它们作为练习留给读者
function totalBill() { var bill = parseFloat(document.getElementById("cost").value); var tip = parseFloat(document.getElementById('tip').value); if (tip > 0) { tip = tip / 100; } if (bill === "" || tip === 0) { alert("enter valid numbers") return; } let total = Math.round(bill += bill * tip).toFixed(2); document.getElementById('totalText').innerHTML = total; } document.getElementById("c").onclick = function() { totalBill(); };
body { font-family: Roboto; background: white; /* fallback for old browsers */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } #calculator { height: 350px; width: 360px; margin: 0px auto; background-color: yellow; padding: 10px; text-align: center; } input { font-weight: bold; } h1 { text-align: center; background: #B03060; color: white; margin: 0; padding: 10px 100px; text-transform: uppercase; font-size: 18px; font-weight: normal; border-top-left-radius: ; border-top-right-radius: 20px; } button { text-transform: uppercase; font-weight: bold; display: block; margin: 30px auto; background: red; border-radius: 2px; width: 200px; height: 50px; font-size: 14px; color: white; } button:hover { transition: 1s; background: white; color: black; } #result { text-align: center; } p { text-align: center; padding-left: 20px; }
<div id="contain"> <h1>How much is the tip?</h1> <div id="calculator"> <form> <p>How much was your meal?</p> <p>$<input id="cost" type="text" placeholder="Enter Cost"></p> <p>How much do you want to tip?</p> <p><input id="tip" type="text" placeholder="Enter percentage">%</p> <button type="button" id="c">Calculate!</button> </form> <div id="result"> <sup>$</sup><span id="totalText">0.00</span> </div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.