javascript - 如何使用 javascript 和 php 禁用数字输入类型

Question

我正在开发一个小项目，其中包含一个 php 页面，该页面将要求用户输入一些测试问题，在编写一个数字(例如 10)后，他将为每种类型分配问题数量。考试(加法、减法、乘法、除法)直到问题数量完成，例如选择总共 10 个问题后，他可以选择 5 道，另外 3 道乘法和 2 道除法，但他不能再分配问题，因为总共 10 道题已经完成。他在 html 中的数字输入类型中分配这些数字，所以我想获取第一个输入类型，即问题总数，然后每次他增加任何考试类型(加法，..)时减少该数字，并且当它达到 0 时，它将禁用输入类型，这是我到目前为止所做的:

var numInput = document.getElementById('numInput');
var Input1 = document.getElementById('Input1');
var Input2 = document.getElementById('Input2');
var Input3 = document.getElementById('Input3');
var Input4 = document.getElementById('Input4');

Input1.disabled = true;
Input2.disabled = true;
Input3.disabled = true;
Input4.disabled = true;

var Checker = setInterval(function Checker() {
var numValue = numInput.value;
//thats what I tried to do to solve my problem but it didn't work properly because it must decrement only 1 but the condition will still be true so it will decrement for ever or at least that is what I think.
if (Input1.value > 0) {
	numValue = numValue - 1;
}
//and this part is working fine.
if (numValue > 0) {
	Input1.disabled = false;
	Input2.disabled = false;
	Input3.disabled = false;
	Input4.disabled = false;
} else if (numValue <= 0) {
	Input1.disabled = true;
	Input2.disabled = true;
	Input3.disabled = true;
	Input4.disabled = true;
}
}, 100);

<form method="GET" action="">
	<h2>How many questions do you want to answer?</h2>
	<input id="numInput" type="number" name="Text" value="0" min="0"><br>	
	<h2>Addition: </h2>&nbsp<input id="Input1" type="number" name="Text" value="0" min="0"><br>
	<h2>Subtraction: </h2>&nbsp<input id="Input2" type="number" name="Text" value="0" min="0"><br>
	<h2>Multiplication: </h2>&nbsp<input id="Input3" type="number" name="Text" value="0" min="0"><br>
	<h2>Division: </h2>&nbsp<input id="Input4" type="number" name="Text" value="0" min="0">
</form>

我不知道如何解决这个问题，所以请帮助我。

Answer 1

您应该将其与其他输入的总和进行比较，而不是递减 numValue

function Checker() {
var sum=parseInt(Input1.value)+parseInt(Input2.value)+parseInt(Input3.value)+parseInt(Input4.value);
var numValue = numInput.value;
if (numValue > sum) 
{
    Input1.disabled = false;
    Input2.disabled = false;
    Input3.disabled = false;
    Input4.disabled = false;
} else  
{
    Input1.disabled = true;
    Input2.disabled = true;
    Input3.disabled = true;
    Input4.disabled = true;
    }
}

此外，比 setInterval 更好的是使用 onchange event

numInput.addEventListener("change", Checker);
Input1.addEventListener("change", Checker);
Input2.addEventListener("change", Checker);
Input3.addEventListener("change", Checker);
Input4.addEventListener("change", Checker);