用户每次输入内容时如何运行脚本？

Question

<form>
<h4>ENTER NUMBER OF WORKMEN: <input type="number" id="s" oninput="helma.value=s.value; mha.value=s.value; sha.value=s.value;" ></h4><hr>
<h2>AVAILABILITY OF PPE</h2><hr>
HELMET&nbsp&nbsp&nbsp&nbsp Required&nbsp&nbsp&nbsp&nbsp
<input type="number" id="helma" >
Available&nbsp<input type="number" id="helmb" oninput="helmx.value=(parseInt(helmb.value)/parseInt(helma.value))*100">&nbsp&nbsp MARKS: <output name="helmx" for="helma helmb"></output>%<br><br>
SAFETY BELT&nbsp&nbsp&nbsp&nbsp Required&nbsp<input type="number" id="belta" value="">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="beltb" value="" oninput="beltx.value=(parseInt(beltb.value)/parseInt(belta.value))*100">&nbsp&nbsp MARKS: <output name="beltx" for="belta beltb"></output>%<br><br>
FR GLOVES&nbsp&nbsp&nbsp&nbsp Required&nbsp<input type="number" id="fra" value="3">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="frb" value="" oninput="frx.value=(parseInt(frb.value)/parseInt(fra.value))*100">&nbsp&nbsp MARKS: <output name="frx" for="fra frb"></output>%<br><br>
MATERIAL HANDLING GLOVES&nbsp&nbsp&nbsp&nbsp Required&nbsp<input type="number" id="mha">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="mhb" value="" oninput="mhx.value=(parseInt(mhb.value)/parseInt(mha.value))*100">&nbsp&nbsp MARKS: <output name="mhx" for="mha mhb"></output>%<br><br>
CUT RESISTANT GLOVES&nbsp&nbsp&nbsp&nbsp Required&nbsp<input type="number" id="cuta" value="4">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="cutb" value="" oninput="cutx.value=(parseInt(cutb.value)/parseInt(cuta.value))*100">&nbsp&nbsp MARKS: <output name="cutx" for="cuta cutb"></output>%<br><br>
EYE GUARD&nbsp&nbsp&nbsp&nbsp Required&nbsp<input type="number" id="eyea" value="2">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="eyeb" oninput="eyex.value=(parseInt(eyeb.value)/parseInt(eyea.value))*100">&nbsp&nbsp MARKS: <output name="eyex" for="eyea eyeb"></output>%<br><br>
NOSE MASK&nbsp&nbsp&nbsp&nbsp<input type="number" id="masa" value="4">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="masb" oninput="masx.value=(parseInt(masb.value)/parseInt(masa.value))*100">&nbsp&nbsp MARKS: <output name="masx" for="masa masb"></output>%<br><br>
EAR PLUG (for Vibrator operation)&nbsp&nbsp&nbsp&nbsp<input type="number" id="eara" value="">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="earb" oninput="earx.value=(parseInt(earb.value)/parseInt(eara.value))*100">&nbsp&nbsp MARKS: <output name="earx" for="eara earb"></output>%<br><br>
SAFETY SHOE&nbsp&nbsp&nbsp&nbsp<input type="number" id="sha">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="shb" oninput="shx.value=(parseInt(shb.value)/parseInt(sha.value))*100">&nbsp&nbsp MARKS: <output name="shx" for="sha shb"></output>%<br><br>
GUM BOOT&nbsp&nbsp&nbsp&nbsp<input type="number" id="gba" value="4">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="gbb" oninput="gbx.value=(parseInt(gbb.value)/parseInt(gba.value))*100">&nbsp&nbsp MARKS: <output name="gbx" for="gba gbb"></output>%<br><br>
LUMINOUS JACKET (FOR C-SET ONLY)&nbsp&nbsp&nbsp&nbsp<input type="number" id="lja">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="ljb" oninput="ljx.value=(parseInt(ljb.value)/parseInt(lja.value))*100;">&nbsp&nbsp MARKS: <output name="ljx" for="lja ljb"></output>%<br><br>
<p id="avppesc"></p>
<script> //calculation of marks
	var average=0,flag=0;
	if (document.getElementById("helmx").value>-1){ average=average+document.getElementById("helmx").value; flag++; }
	if (document.getElementById("beltx").value>-1){ average=average+document.getElementById("beltx").value; flag++; }
	if (document.getElementById("frx").value>-1){ average=average+document.getElementById("frx").value; flag++; }
	if (document.getElementById("mhx").value>-1){ average=average+document.getElementById("mhx").value; flag++; }
	if (document.getElementById("cutx").value>-1){ average=average+document.getElementById("cutx").value; flag++; }
	if (document.getElementById("eyex").value>-1){ average=average+document.getElementById("eyex").value; flag++; }
	if (document.getElementById("masx").value>-1){ average=average+document.getElementById("masx").value; flag++; }
	if (document.getElementById("earx").value>-1){ average=average+document.getElementById("earx").value; flag++; }
	if (document.getElementById("shx").value>-1){ average=average+document.getElementById("shx").value; flag++; }
	if (document.getElementById("gbx").value>-1){ average=average+document.getElementById("gbx").value; flag++; }
	if (document.getElementById("ljx").value>-1){ average=average+document.getElementById("ljx").value; flag++; }
	average=average/flag;
	document.getElementById("avppesc").innerHTML=average;

	</script>

<br><br><br>

	</form>

每当用户以html形式输入内容时，我都希望运行注释为“标记计算”的脚本。如果用户在该字段中未输入任何内容，则不应在计算中予以考虑。

我一直在尝试使用onload函数，没有任何作用。

我希望带有id=avppesc的属性显示脚本中计算的平均值。脚本应该在用户输入任何内容时更新。

Answer 1

使用功能onkeyup：

<input type="number" id="s" onkeyup="calculate_avg(parameters)" >
<script> function calculate_avg(parametrs){

    var average=0,flag=0;
        if (document.getElementById("helmx").value>-1){ average=average+document.getElementById("helmx").value; flag++; }
        average=average/flag;
        document.getElementById("avppesc").innerHTML=average;

}
</script>

Answer 2

就像每次用户离开输入时验证表单一样，onblur属性调用将执行脚本的处理程序。

<h4>ENTER NUMBER OF WORKMEN: <input type="number" id="s" oninput="helma.value=s.value; mha.value=s.value; sha.value=s.value;" onblur="calcOfMarks(this)" /></h4><hr> // this a reference of the input element

function calcOfMarks(inputField) { // inputField is the ID number for the HTML text box
  // Your logic here
  console.log(inputField.value);
}

Answer 3

oninput事件侦听器每次在input的值更改时执行。 让我们看看这是否是您想要的。

let inputs = document.querySelectorAll('form input');

let avppesc = document.querySelector('#avppesc');
for(let i = 0; i<inputs.length; ++i){
  inputs[i].addEventListener('input', onInputFunction);
}
  
function onInputFunction(){
  let average=0,flag=0;  
  for(let i = 1; i<inputs.length; ++i){  
    let id = inputs[i].id.slice(0,-1);
    let value = parseFloat(inputs[i].value) || 0;
    let ina = parseInt(document.querySelector('#'+id+'a').value);
    let inb = parseInt(document.querySelector('#'+id+'b').value);

    if(inb > 0 && ina>0)
    document.querySelector('#'+id+'x').value = inb/ina*100;
    
    if(value <= -1) continue;
    flag++;
    average += value;
  }
  
  average /= flag;
  
  avppesc.textContent = average;
}

//helmx.value=(parseInt(helmb.value)/parseInt(helma.value))*100

<form>
<h4>ENTER NUMBER OF WORKMEN: <input type="number" id="s" oninput="helma.value=s.value; mha.value=s.value; sha.value=s.value;" ></h4><hr>
<h2>AVAILABILITY OF PPE</h2><hr>
HELMET&nbsp&nbsp&nbsp&nbsp Required&nbsp&nbsp&nbsp&nbsp
<input type="number" id="helma" >
Available&nbsp<input type="number" id="helmb">&nbsp&nbsp MARKS: <output class='out' id="helmx" for="helma helmb"></output>%<br><br>
SAFETY BELT&nbsp&nbsp&nbsp&nbsp Required&nbsp<input type="number" id="belta" value="">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="beltb">&nbsp&nbsp MARKS: <output class='out' id="beltx" for="belta beltb"></output>%<br><br>
FR GLOVES&nbsp&nbsp&nbsp&nbsp Required&nbsp<input type="number" id="fra" value="3">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="frb">&nbsp&nbsp MARKS: <output class='out' id="frx" for="fra frb"></output>%<br><br>
MATERIAL HANDLING GLOVES&nbsp&nbsp&nbsp&nbsp Required&nbsp<input type="number" id="mha">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="mhb">&nbsp&nbsp MARKS: <output class='out' id="mhx" for="mha mhb"></output>%<br><br>
CUT RESISTANT GLOVES&nbsp&nbsp&nbsp&nbsp Required&nbsp<input type="number" id="cuta" value="4">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="cutb">&nbsp&nbsp MARKS: <output class='out' id="cutx" for="cuta cutb"></output>%<br><br>
EYE GUARD&nbsp&nbsp&nbsp&nbsp Required&nbsp<input type="number" id="eyea" value="2">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="eyeb">&nbsp&nbsp MARKS: <output class='out' id="eyex" for="eyea eyeb"></output>%<br><br>
NOSE MASK&nbsp&nbsp&nbsp&nbsp<input type="number" id="masa" value="4">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="masb">&nbsp&nbsp MARKS: <output class='out' id="masx" for="masa masb"></output>%<br><br>
EAR PLUG (for Vibrator operation)&nbsp&nbsp&nbsp&nbsp<input type="number" id="eara" value="">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="earb">&nbsp&nbsp MARKS: <output class='out' id="earx" for="eara earb"></output>%<br><br>
SAFETY SHOE&nbsp&nbsp&nbsp&nbsp<input type="number" id="sha">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="shb">&nbsp&nbsp MARKS: <output id="shx" for="sha shb"></output>%<br><br>
GUM BOOT&nbsp&nbsp&nbsp&nbsp<input type="number" id="gba" value="4">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="gbb">&nbsp&nbsp MARKS: <output class='out' id="gbx" for="gba gbb"></output>%<br><br>
LUMINOUS JACKET (FOR C-SET ONLY)&nbsp&nbsp&nbsp&nbsp<input type="number" id="lja">&nbsp&nbsp&nbsp Available&nbsp<input type="number" id="ljb">&nbsp&nbsp MARKS: <output class='out' id="ljx" for="lja ljb"></output>%<br><br>
<p id="avppesc"></p>
</form>