[英]How to retrieve a form value, perform an operation on that and display within a <p> tag?
I want to get a number from a form-control type = "number", compare it, and then if OK with the condition, perform multiplication, and division on it. 我想从表单控件类型=“数字”中获取一个数字,比较它,然后如果条件正常,则执行乘法和除法。 After that I want to display the result as the contents of a <p>
tag. 之后我想将结果显示为<p>
标签的内容。 How to accomplish this? 怎么做到这一点?
Here is what I have tried so far: 这是我到目前为止所尝试的:
let amount = document.getElementById(".amount"); let marginAmount = document.getElementById(".marginAmount") let submit = document.getElementById(".submit"); submit.addEventListener('click', calcAmount); const calcLevel1 = amount * 7 / 100; function calcAmount() { let userAmount = Number(amount.value); let level1 = 351; if (userAmount <= level1) { marginAmount.textContent = calcLevel1.value; } }
<div class="form"> <label for="points amount">Entrez un montant en points</label> <input type="number" class="amount-enter" id="amount"> <input type="submit" value="Montant marge additionnelle" id="submit" class="submit-enter"> </div> <p id="marginAmount" class="enter-margin"></p>
Here is the code corrected, there are. 这是纠正的代码,有。 Which are to be deleted I also added math.round
to get rounded result: 哪些是要删除我还添加了math.round
以获得舍入结果:
<html> <head> <script> function calcAmount() { let userAmount = document.getElementById("amount").value; let level1 = 351; if (userAmount <= level1) { document.getElementById("marginAmount").textContent = Math.round(userAmount * 7) / 100; } else { document.getElementById("marginAmount").textContent = "Amount is > 351"; } } </script> </head> <body> <div class="form"> <label for="points amount">Entrez un montant en points</label> <input type="number" class="amount-enter" id="amount"> <input type="submit" value="Montant marge additionnelle" id="submit" class="submit-enter" onclick="calcAmount()"> </div> <p id="marginAmount" class="enter-margin"></p> </body>
Three things: 三件事:
.
你有.
in your ID selectors, these shouldn't be there (they should be #
but only in a querySelector
method). 在你的ID选择器中,这些不应该存在(它们应该是#
但只能在querySelector
方法中)。 calcLevel1
straightaway, which meant it was 0 * 7 / 100
which is 0
. 你是直接计算calcLevel1
,这意味着它是0 * 7 / 100
calcLevel1
,即0
。 calcLevel1
with amount.value
, which means you can remove calcLevel1.value
when you're setting the textContent
of the paragraph. 您需要使用amount.value
计算calcLevel1
,这意味着您可以在设置段落的textContent
时删除calcLevel1.value
。 I also added an else
statement so the textContent
is emptied when the statement is false. 我还添加了一个else
语句,以便在语句为false时清空textContent
。
let amount = document.getElementById("amount"); let marginAmount = document.getElementById("marginAmount") let submit = document.getElementById("submit"); submit.addEventListener('click', calcAmount); function calcAmount() { const calcLevel1 = amount.value * 7 / 100; let userAmount = Number(amount.value); let level1 = 351; if (userAmount <= level1) { marginAmount.textContent = calcLevel1; } else { marginAmount.textConten = ""; } }
<div class="form"> <label for="points amount">Entrez un montant en points</label> <input type="number" class="amount-enter" id="amount"> <input type="submit" value="Montant marge additionnelle" id="submit" class="submit-enter"> </div> <p id="marginAmount" class="enter-margin"></p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.