如果输入正确的信息，如何使按钮亮起？

I made a permutation and combination calculator. If the permutation | combination is selected, and the values are entered, the calculate button should light up. How can I do this without setting interval. My current code:

我做了一个排列和组合计算器。如果置换|选择组合,输入值,计算按钮应亮起。如何在不设置间隔的情况下执行此操作。我目前的代码:

function checkCalc(){
 if(((permutation==true)||(combination==true))&&(document.getElementById('r').value.length>0)&&(document.getElementById('n').value.length>0)){
  calculate.style.backgroundColor="#ccccff";
  calculate.style.boxShadow="10px 10px 5px gray";
 }
 else{
  calculate.style.backgroundColor="gray";
 }
}

setInterval(checkCalc, 50);

If I remove the function(just leaving the if statement), it doesn't work.

如果我删除该函数(只是离开if语句),它就不起作用。

2 个解决方案

#1

You need to call this function on keyup from the input.

您需要在输入上的keyup上调用此函数。

I have made a demo:

我做了一个演示:

var permutation=true;
var combination=true;
var calculate= document.getElementById('calculate')
function checkCalc(){
 if(((permutation==true)||(combination==true))&&(document.getElementById('r').value.length>0)&&(document.getElementById('n').value.length>0)){
   calculate.style.backgroundColor="#ccccff";
   calculate.style.boxShadow="10px 10px 5px gray";
 }else{
   calculate.style.backgroundColor="gray";
 }
}

<input type ="text" id ='r' onkeyup="checkCalc()">
<input type ="text" id ='n' onkeyup="checkCalc()">
<button id="calculate">Light</button>

#2

As you are checking for the value anyway, you could set an event listener on r text field (I assume it is a text field?), which would be trigged once you type something:

当你正在检查值时,你可以在r文本字段上设置一个事件监听器(我假设它是一个文本字段?),一旦你输入一些内容就会被触发:

document.getElementById('r').onkeydown=function(){
 if(((permutation==true)||(combination==true))&&(document.getElementById('r').value.length>0)&&(document.getElementById('n').value.length>0)){
  calculate.style.backgroundColor="#ccccff";
  calculate.style.boxShadow="10px 10px 5px gray";
 }
 else{
  calculate.style.backgroundColor="gray";
 }
}

#1