如何将 my if 语句组合成一个检查指定条件的 if 语句-解网

问：

您好，我是一个有抱负的编码员，并且在我的概念验证（即简单的网络计算器）方面取得了很大进展，但我的disableInputFields函数遇到了问题。我无法弄清楚如何将我的两个 if 语句组合成一个条件语句。我需要使我的计算按钮不再被禁用，因为在两个输入字段中都有一个数字并选择了一个单选按钮。我尝试制作两个条件，但逻辑无法按照我的意图工作。

<!DOCTYPE html>
  <head>
    <title>WebCalc</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./webcalc.css" />
  </head>
  <body>
    <h1>Simple Calculator</h1>
    <form>
        <label for="input1" id="put1">Input 1</label>
        <input id="input1" onkeyup="disableInputFields()" type="number"><br>
      <div class="buttons">
        <label>
          <input id="btnAdd" class="radioButton" type="radio" name="radiobruh" onclick="disableInputFields()"></input>
          <span>+</span>
        </label>
        <label>
          <input id="btnSubtract" class="radioButton" type="radio" name="radiobruh" onclick="disableInputFields()"></input>
          <span>-</span>
        </label>
        <label>
          <input id="btnMultiply" class="radioButton" type="radio" name="radiobruh" onclick="disableInputFields()"></input>
          <span>*</span>
        </label>
        <label>
          <input id="btnDivide" class="radioButton" type="radio" name="radiobruh" onclick="disableInputFields()"></input>
          <span>/</span>
        </label>
      </div>
        <label for="input2" id="put2">Input 2</label>
        <input id="input2" onkeyup="disableInputFields()" type="number"><br>
      <div>
        <button id="calculate" type="button" disabled>Calculate</button>
      </div>
      <p>Output</p>
      <textarea id="resultTxtArea" rows="5" cols="75" ></textarea>
      <div>
        <button id="clear" type="default">Clear</button>
      </div>
    </form>
  </body>
<script>
    // radio buttons have to be selected
    // numbered outputs
    let calculationInput1 = document.getElementById("input1");
    let calculationInput2 = document.getElementById("input2");
    let txtAreaResult = document.getElementById("resultTxtArea");
    let additionRadioButton = document.getElementById("btnAdd");
    let subtractRadioButton = document.getElementById("btnSubtract");
    let multiplyRadioButton = document.getElementById("btnMultiply");
    let divideRadioButton = document.getElementById("btnDivide");
    let allButtons = document.getElementsByClassName("buttons");
    let calculationEventListener = document.getElementById("calculate");
    let clearButton = document.getElementById("clear");
    let calculation;

    calculationEventListener.addEventListener("click", function() {
      console.dir(additionRadioButton);
      compute();
      outputResult(calculation);
    });

    function disableInputFields() {
        if (calculationInput1.value && calculationInput2.value === "") {
          calculationEventListener.disabled = true;
        } else { 
          calculationEventListener.disabled = false;
        }
        if (additionRadioButton.checked === "true" ||
        subtractRadioButton.checked === "true" || 
        multiplyRadioButton.checked === "true" ||
        divideRadioButton.checked === "true" ) {
          calculationEventListener.disabled = true;
        } else { 
          calculationEventListener.disabled = false;
        }
    };

    function compute() {
      if (additionRadioButton.checked === true){
        calculation = calculationInput1.valueAsNumber + calculationInput2.valueAsNumber;
      }

      if (subtractRadioButton.checked === true){
        calculation = calculationInput1.valueAsNumber - calculationInput2.valueAsNumber;
      }

      if (multiplyRadioButton.checked === true){
        calculation = calculationInput1.valueAsNumber * calculationInput2.valueAsNumber;
      }

      if (divideRadioButton.checked === true){
        calculation = calculationInput1.valueAsNumber / calculationInput2.valueAsNumber;
      }
    };

    function outputResult(result) {
      txtAreaResult.innerHTML += new Date() + ": " + result + '\r\n';
    };
  </script>
</html>

我尝试将这些条件与管道操作员组合在一起，但它不起作用，因为一个单选按钮将使该按钮能够在输入字段中没有任何内容的情况下按下。

javascript 函数 if-statement

function disableInputFields() {
    if ((calculationInput1.value && calculationInput2.value) && 
         (additionRadioButton.checked ||
          subtractRadioButton.checked || 
          multiplyRadioButton.checked ||
          divideRadioButton.checked)) {
           calculationEventListener.disabled = false;
    } else { 
      calculationEventListener.disabled = true;
    }
};

我刚刚试过这个，它工作得很好。

const 
  myForm = document.querySelector('#my-form')
, Calculate =
    { Add      : (a,b) => a + b
    , Subtract : (a,b) => a - b
    , Multiply : (a,b) => a * b
    , Divide   : (a,b) => (a===0) ? 0 : (b===0) ? 'infinite' : a / b
    };
myForm.oninput = e =>
  {
  myForm.bt_submit.disabled = (myForm.radiobruh.value === '') 
                           || (myForm.input1.value === '')
                           || (myForm.input2.value === '');
  }
myForm.onreset = e =>
  {
  myForm.bt_submit.disabled = true;
  //  myForm.resultTxtArea.textContent = '';
  }
myForm.onsubmit = e =>
  {
  e.preventDefault();
  myForm.resultTxtArea.textContent += new Date() + ": " 
    + Calculate[myForm.radiobruh.value](myForm.input1.valueAsNumber, myForm.input2.valueAsNumber)
    + '\r\n';
  }

label, fieldset, button {
  display   : block;
  min-width : 10em;
  margin    : .3em 0;
  border    : none;
  }
fieldset > label { 
  display   : inline-block;  
  min-width : 4em;
  }
button {
  padding     : .5em;
  font-weight : bold;
  }
button:disabled {
  font-weight : normal;
  font-style  : oblique;
  }

<h2>Simple Calculator</h2>
<form id="my-form">
  <label> Input 1  <input name="input1" type="number" />  </label>
  <fieldset>
    <label> <input name="radiobruh" type="radio" value="Add"      /> <b>&#43;</b> </label>
    <label> <input name="radiobruh" type="radio" value="Subtract" /> <b>&#8722;</b> </label>
    <label> <input name="radiobruh" type="radio" value="Multiply" /> <b>&#215;</b> </label>
    <label> <input name="radiobruh" type="radio" value="Divide"   /> <b>&#247;</b> </label>
  </fieldset>
  <label> Input 2  <input name="input2" type="number">  </label>
  <button type="submit" name="bt_submit" disabled>Calculate</button>
  <p>Output</p>
  <textarea name="resultTxtArea" rows="5" cols="75"></textarea>
  <button type="reset">Clear</button>
</form>

上一个：在 C 语言中使用函数和 if-else 语句打印出 2 位数字的拼写（初学者）

下一个：石头剪刀布 JavaScript 代码不起作用。我把它作为我的第一个项目，我完全不知道为什么它不起作用

如何将 my if 语句组合成一个检查指定条件的 if 语句

How to combine my if statements to one if statement that checks the specified conditions

评论

评论