CODEWITHSUNDEEP
javascripthtmlif-statement
ＭＫＴ
ＭＫＴ

Reputation: 15

Using Conditionals in JavaScript to print a message in HTML

I created a calculator using HTML and JavaScipt. The calculator works, so that is fine. However, I would like to write a message in the html that lets the user know they have to enter a variable, if the result is NaN. While I know I need to use a conditional statement, I am not sure how to code it.

Here is my code:

function calc(){
        var n1 = parseFloat(document.getElementById("n1").value);
        var n2 = parseFloat(document.getElementById("n2").value);
        var oper = document.getElementById("operators").value;

        if( oper === "+"){
            document.getElementById("result").value = n1+n2;
        }
        if( oper === "-"){
            document.getElementById("result").value = n1-n2;
        }
        if( oper === "*"){
            document.getElementById("result").value = n1*n2;
        }
        if( oper === "/"){
            document.getElementById("result").value = n1/n2;
        }
        if( oper === NaN ){
            document.getElementById("Comments").innerHTML= "Write something in the boxes, you silly ass." ;
        }
     }
<input type="text" id="n1"/><br/><br/>
<input type="text" id="n2"/><br/><br> 

<select id="operators">
    <option value="+">+</option> 
    <option value="-">-</option> 
    <option value="X">X</option> 
    <option value="/">/</option> 
</select>

<input type="text" id="result"/> 
 <button onclick="calc();">=</button>
<p id="Comments"></p>

Upvotes: 0

Views: 839

Answers (3)

Devin Fields
Devin Fields

Reputation: 2544

I'll provide this as a more concise version. There's no reason to select an element more than once if you plan on altering it later. Using the object as a container for your options allows you to validate and execute a bit easier.

const options = {
  '+'(a, b) { return a + b },
  '-'(a, b) { return a - b },
  '*'(a, b) { return a * b },
  '/'(a, b) { return a / b }
};
function calc(){
  var n1 = parseFloat(document.getElementById("n1").value);
  var n2 = parseFloat(document.getElementById("n2").value);
  var oper = document.getElementById("operators").value;
  const resEl = document.getElementById("result");
  resEl.value = '';
  const comEl = document.getElementById("Comments");
  comEl.innerHTML = '';

  let result;
  let targetEl;

  if (isNaN(n1) || isNaN(n2)) {
    targetEl = comEl;
    result = "Write something valid in the boxes, silly.";
  }
  else if (options[oper]) {
    target = resEl;
    result = options[oper](n1, n2);
  }
  else {
    targetEl = comEl;
    result = "Pick an operation." ;
  }

  let prop = typeof result === 'string' ? 'innerHTML' : 'value';
  targetEl[prop] = result;

}

Upvotes: 0

Matheus Pitz
Matheus Pitz

Reputation: 476

To improve your code you can add else if and isNaN, like this:

function calc(){
        var n1 = parseFloat(document.getElementById("n1").value);
        var n2 = parseFloat(document.getElementById("n2").value);
        var oper = document.getElementById("operators").value;

        if( oper === "+"){
            document.getElementById("result").value = n1+n2;
        } else if( oper === "-"){
            document.getElementById("result").value = n1-n2;
        } else if( oper === "*"){
            document.getElementById("result").value = n1*n2;
        } else if( oper === "/"){
            document.getElementById("result").value = n1/n2;
        } else if( isNaN(oper) ){
            document.getElementById("Comments").innerHTML= "Write something in the boxes, you silly ass." ;
        }
     }
<input type="text" id="n1"/><br/><br/>
<input type="text" id="n2"/><br/><br> 

<select id="operators">
    <option value="+">+</option> 
    <option value="-">-</option> 
    <option value="X">X</option> 
    <option value="/">/</option> 
</select>

<input type="text" id="result"/> 
 <button onclick="calc();">=</button>
<p id="Comments"></p>

Upvotes: 1

chevybow
chevybow

Reputation: 11888

Use the isNaN function to check for it 

    function calc(){
        var n1 = parseFloat(document.getElementById("n1").value);
        var n2 = parseFloat(document.getElementById("n2").value);
        var oper = document.getElementById("operators").value;

        if( oper === "+"){
            document.getElementById("result").value = n1+n2;
        }
        if( oper === "-"){
            document.getElementById("result").value = n1-n2;
        }
        if( oper === "*"){
            document.getElementById("result").value = n1*n2;
        }
        if( oper === "/"){
            document.getElementById("result").value = n1/n2;
        }
        if( isNaN(oper) ){
            document.getElementById("Comments").innerHTML= "Write something in the boxes, you silly ass." ;
        }
     }
<input type="text" id="n1"/><br/><br/>
<input type="text" id="n2"/><br/><br> 

<select id="operators">
    <option value="+">+</option> 
    <option value="-">-</option> 
    <option value="X">X</option> 
    <option value="/">/</option> 
</select>

<input type="text" id="result"/> 
 <button onclick="calc();">=</button>
<p id="Comments"></p>

Upvotes: 1

Related Questions