IF 语句第一次运行但不是第二次？
[英]IF Statement runs first time but not the second time?
问题描述
I made a percentage number calculator.
我做了一个百分比数字计算器。 This is my first JavaScript code but I am having trouble with it.这是我的第一个 JavaScript 代码，但我遇到了问题。 When you run it the first time it runs with no problems but the second time it gets stuck in the IF statement and won't give you a total unless you refresh the page.当您第一次运行它时，它运行没有问题，但第二次它会卡在 IF 语句中，除非您刷新页面，否则不会给您总数。
Here's the JavaScript Code:这是 JavaScript 代码：
let originalAmount = document.getElementById('original_amount'); let percentage = document.getElementById('percentage'); let percentAmount = document.getElementById('percentage_amount'); let calculate = document.getElementById('calculate'); calculate.addEventListener('click', function() { originalAmount = Number(originalAmount.value); percentage = Number(percentage.value); if (isNaN(originalAmount) || originalAmount <= 0 || originalAmount === null) { alert('Please enter a valid Bill Amount') } else if (isNaN(percentage) || percentage <= 0 || percentage === null) { alert('Please enter a valid Tip Percentage') } else { let calculatedTip = percentage / 100 * originalAmount; percentAmount.value = calculatedTip; } })
body { font-family: 'Roboto', sans-serif; margin: 0; padding: 0; } h1 { color: #fdcb9e; font-size: 50px; text-align: center; margin-top: 0; } div#calculator { color: white; font-size: 35px; width: 800px; background-color: #0f4c75; border-radius: 25px; padding: 50px; margin: auto; } label { display: inline-block; width: 400px; margin-right: 25px; padding: 15px; } input { margin-right: 50px; width: 100px; height: 25px; padding: 2.5px 40px; text-align: center; } #calculate { background-color: #00b7c2; color: white; border: none; border-radius: 15px; width: 150px; height: 35px; font-size: 25px; margin: 25px 200px 15px 300px; }
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap" rel="stylesheet"> <main style="background-color: #1b262c;"> <h1>Percentage of a Number Calculator!</h1> <div id="calculator"> <label>Number:</label><input id="original_amount"><br> <label>Percentage:</label><input id="percentage"><br> <label>Percentage of Number:</label><input id="percentage_amount" disabled><br> <button id="calculate">Calculate</button> </div> <!--<script src="app.js"></script>--> </main>
2 个解决方案
解决方案1
0 2020-11-17 05:14:54
After your first click, your original amount and percentage gets replaced with the calculated value.在您第一次点击后，您的原始金额和百分比将替换为计算出的值。 Try changing your function like below.尝试更改您的功能，如下所示。
calculate.addEventListener('click', function(){ let originalAmount = document.getElementById('original_amount'); let percentage = document.getElementById('percentage'); let percentAmount = document.getElementById('percentage_amount'); let calculate = document.getElementById('calculate'); originalAmount = Number(originalAmount.value); percentage = Number(percentage.value); if (isNaN(originalAmount) || originalAmount <= 0 || originalAmount === null){ alert('Please enter a valid Bill Amount') } else if (isNaN(percentage) || percentage <= 0 || percentage === null){ alert('Please enter a valid Tip Percentage') } else { let calculatedTip = percentage/100*originalAmount; percentAmount.value = calculatedTip; } })
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Percent of a Number Calculator!</title> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap" rel="stylesheet"> <style> body { font-family: 'Roboto', sans-serif; } h1 { color: #fdcb9e; font-size: 50px; text-align:center; } div#calculator{ color: white; font-size: 35px; width: 800px; background-color: #0f4c75; border-radius: 25px; padding: 50px; margin: auto; } label{ display:inline-block; width: 400px; margin-right: 25px; padding: 15px; } input{ margin-right: 50px; width: 100px; height: 25px; padding: 2.5px 40px; text-align: center; } #calculate{ background-color: #00b7c2; color: white; border: none; border-radius: 15px; width: 150px; height: 35px; font-size: 25px; margin: 25px 200px 15px 300px; } </style> </head> <body style="background-color: #1b262c;"> <h1>Percentage of a Number Calculator!</h1> <div id="calculator"> <label>Number:</label><input id="original_amount"></br> <label>Percentage:</label><input id="percentage"></br> <label>Percentage of Number:</label><input id="percentage_amount" disabled></br> <button id="calculate">Calculate</button> </div> <script src="app.js"></script> </body>
解决方案2
0 2020-11-17 05:19:11
you are overwriting originalAmount object to a number here the little change.您正在将originalAmount对象覆盖为一个数字，这里的变化很小。
originalAmount to originalAmountInput and percentage to percentageInput originalAmount到originalAmountInput和percentage到percentageInput
let originalAmountInput = document.getElementById('original_amount'); let percentageInput = document.getElementById('percentage'); let percentAmount = document.getElementById('percentage_amount'); let calculate = document.getElementById('calculate'); calculate.addEventListener('click', function() { var originalAmount = Number(originalAmountInput.value); var percentage = Number(percentageInput.value); if (isNaN(originalAmount) || originalAmount <= 0 || originalAmount === null) { alert('Please enter a valid Bill Amount') } else if (isNaN(percentage) || percentage <= 0 || percentage === null) { alert('Please enter a valid Tip Percentage') } else { let calculatedTip = percentage / 100 * originalAmount; percentAmount.value = calculatedTip; } })
body { font-family: 'Roboto', sans-serif; margin: 0; padding: 0; } h1 { color: #fdcb9e; font-size: 50px; text-align: center; margin-top: 0; } div#calculator { color: white; font-size: 35px; width: 800px; background-color: #0f4c75; border-radius: 25px; padding: 50px; margin: auto; } label { display: inline-block; width: 400px; margin-right: 25px; padding: 15px; } input { margin-right: 50px; width: 100px; height: 25px; padding: 2.5px 40px; text-align: center; } #calculate { background-color: #00b7c2; color: white; border: none; border-radius: 15px; width: 150px; height: 35px; font-size: 25px; margin: 25px 200px 15px 300px; }
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap" rel="stylesheet"> <main style="background-color: #1b262c;"> <h1>Percentage of a Number Calculator!</h1> <div id="calculator"> <label>Number:</label><input id="original_amount"><br> <label>Percentage:</label><input id="percentage"><br> <label>Percentage of Number:</label><input id="percentage_amount" disabled><br> <button id="calculate">Calculate</button> </div> <!--<script src="app.js"></script>--> </main>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
第一次我的函数运行正常，第二次它的错误jQuery - first time my function runs fine, second time its wrong jquery
第一次运行脚本时，如何在Javascript中打印一组名称，然后第二次出现提示？ - How can I print a set of names in Javascript the first time the script runs followed by a prompt the second time?
POST函数运行两次，第一次API调用失败，第二次运行。 - POST function runs twice, first time API call fails, second time it works.
为什么循环第二次运行时会出现卡顿？ - Why is there stutter when the loop runs the second time?
Google表格功能部分运行第二次 - Google Sheets Function Runs Partially a Second Time
如何确保javascript事件第二次运行？ - How to ensure javascript event runs second time?
构造函数第二次失败，但不是第一次失败 - Constructor fails on second time, but not first
Javascript Dragleave只在第一次运行 - Javascript dragleave runs only first time
.load和.slideDown在第一次运行时不起作用 - .load and .slideDown does not work first time it runs
首次运行脚本时未调用该函数 - function not being called first time script runs
相关标签