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

jamiefinster
October 17, 2023
162 views
1 vote
2 Answers

Hello I am an aspiring coder and have been making a ton of progress on my proof of concept i.e. simple web calculator but I am having trouble with my disableInputFields function. I cannot figure out how to combine my two if statements into one conditional statement. I need to make my calculate button no longer disabled based off having a number in both input fields and having one radio button selected. I tried making two conditionals but the logic doesn’t work how I intend it to.

<!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 + 'rn';
    };
  </script>
</html>

I’ve tried combining the conditions together with the pipe operators but it doesn’t work as one radio button will make the button able to be pressed without anything in the input fields.

Answers

As I understand, this is what you want:

if ((calculationInput1.value && calculationInput2.value) && 
     (additionRadioButton.checked ||
      subtractRadioButton.checked || 
      multiplyRadioButton.checked ||
      divideRadioButton.checked)){

So your disableInputFields function should look like this:

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

I just tried this and it works perfectly fine.

So simple by using names inside a <form>

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)
    + 'rn';
  }

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>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers