嗨，我正试图使用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?"
/>
当您想从输入中获取值时，应该在元素上使用.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>如果您希望在更改输入值时重新计算百分比，下面是如何做到这一点的。
我在这里输出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>