Javascript If ELSE involving user input-CodePudding

I have to write a program in Javascript where the program takes the value of two variables from the user and then if both the variables are non-zero, then they will concatenate and if only one of them is non-zero, then they will get added. I have tried a lot but I am still not getting the output desired. This is what I have done

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Enter 1st number<input type="number"id="demo1"></p>  
    

    <p>Enter 2nd number<input type="number"id="demo2"></p>
    

    <p>To get your answer, please press the button</p>
    <button onclick="function1()">Your_Result</button></p>

    <p id="ans1"> If any one of the the numbers is 0, then your answer is: </p>
    <p id="ans2"> If both of your numbers are non-zero, then your answer is: </p>
    
    <script>
   A=parseInt(document.getElementById("demo1").value);
   B=parseInt(document.getElementById("demo2").value)

        if (A && B)  {
            var sum="" A B
            function function1() {
                document.getElementById("ans2").innerHTML = sum;
            }
        
        }

        else {
         sum= A B;
            function function1() {
document.getElementById("ans1").innerHTML = sum;

            }
        }

    </script>
    </body>
    </html>

CodePudding user response：

The problem you have is that all forular inputs are transmitted as strings. which means you try to calculate with strings. of course this doesn't work. that's why you have to convert the strings into integers beforehand. You do this with the parseInt() function.

CodePudding user response：

After the button click, the calculation and result should take place inside the function. But in your code, you are writing your function definition inside the if-else conditions which is wrong. Here's the working:

function function1() {
  A = parseInt(document.getElementById("demo1").value);
  B = parseInt(document.getElementById("demo2").value);

  if (A && B) {
    document.getElementById("ans2").innerHTML = "If both of your numbers are non-zero, then your answer is: "   A   B;
    document.getElementById("ans1").innerHTML = "If any one of the the numbers is 0, then your answer is: ";
  } else {
    document.getElementById("ans1").innerHTML = "If any one of the the numbers is 0, then your answer is:"   (A   B);
    document.getElementById("ans2").innerHTML = "If both of your numbers are non-zero, then your answer is: ";
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>Enter 1st number<input type="number" id="demo1"></p>
  <p>Enter 2nd number<input type="number" id="demo2"></p>

  <p>To get your answer, please press the button</p>
  <button onclick="function1()">Your_Result</button></p>
  <p id="ans1"> If any one of the the numbers is 0, then your answer is: </p>
  <p id="ans2"> If both of your numbers are non-zero, then your answer is: </p>

</body>

</html>

CodePudding user response：

You need to check it inside the function. As it will reevaluate the values from dom once the function begin.

function function1() {
  let A = parseInt(document.getElementById("demo1").value);
  let B = parseInt(document.getElementById("demo2").value)

  document.getElementById("ans2").innerHTML = (A && B) ? A   B : '';
}

<p>Enter 1st number<input type="number" id="demo1"></p>


<p>Enter 2nd number<input type="number" id="demo2"></p>


<p>To get your answer, please press the button</p>
<button onclick="function1()">Your_Result</button></p>

<p id="ans1"> If any one of the the numbers is 0, then your answer is: </p>
<p id="ans2"> If both of your numbers are non-zero, then your answer is: </p>