用JavaScript计算HTML输入
用JavaScript计算HTML输入
提问于 2022-03-12 12:58:14
嗨，我试着用HTML输入的百分比来计算
let timeSpend = document.querySelector(".time_spend")
var fSubject = (50/timeSpend)*100;
var sSubject = (25/timeSpend)*100;
var tSubject = (25/timeSpend)*100;
window.alert(fSubject);这是我的HTML输入，我有数字的类型，但我不知道为什么它仍然不能工作
<input
type="number"
id="text-box"
class="time_spend"
placeholder="How much time do you have?"
/>回答 2
Stack Overflow用户
发布于 2022-03-12 13:07:12
当您想从输入中获取值时，应该对元素使用.value。当你想要做这个仍然应该被决定，你想要它在提交或按钮点击。这是一个使用按钮的例子。
<!DOCTYPE html>
<html lang="en">
<body>
<input type="number" id="text-box" class="time_spend" placeholder="How much time do you have?" />
<button onclick="buttonClicked()">test</button>
</body>
<script>
const buttonClicked = () => {
let timeSpend = document.querySelector(".time_spend").value;
console.log(timeSpend);
var fSubject = (50 / timeSpend) * 100;
var sSubject = (25 / timeSpend) * 100;
var tSubject = (25 / timeSpend) * 100;
window.alert(fSubject);
};
</script>
</html>
Stack Overflow用户
发布于 2022-03-12 13:16:21
如果您希望在更改输入中的值时重新计算百分比，那么可以这样做。
我在这里输出html中的百分比，举个例子
const timeSpendInput = document.querySelector(".time_spend")
const fSubjectSpan = document.querySelector("#fSubject");
const sSubjectSpan = document.querySelector("#sSubject");
const tSubjectSpan = document.querySelector("#tSubject");
timeSpendInput.addEventListener("change", () => {
const timeSpend = timeSpendInput.value;
const fSubject = (50/timeSpend)*100;
const sSubject = (25/timeSpend)*100;
const tSubject = (25/timeSpend)*100;
fSubjectSpan.innerHTML = fSubject;
sSubjectSpan.innerHTML = sSubject;
tSubjectSpan.innerHTML = tSubject;
})<input
type="number"
id="text-box"
class="time_spend"
placeholder="How much time do you have?"
/>
<br>
<label>fSubject: <span id="fSubject"></span></label>
<br>
<label>sSubject: <span id="sSubject"></span></label>
<br>
<label>tSubject: <span id="tSubject"></span></label>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71449892
复制相关文章
相似问题
腾讯云开发者
