Home > Mobile >  javascript calculator not getting values from form
javascript calculator not getting values from form

Time：10-30

the 2 variables in the beginning num1 and num2 are not be grabbed from the HTML form in the javascript file. it does work if I assign the value to the input boxes but not when the user changes the value

I'm new to javascript and trying to learn so any help would greatly be appreciated

let num1 = document.getElementById("num1-el").value
let num2 = document.getElementById("num2-el").value

let calEl = document.getElementById("cal-el")
let sumEl = document.getElementById("equals-el")
let sum = 0
const submitBtn = document.getElementById("submit-btn")

submitBtn.addEventListener("click", function() {

  if (calEl.value === " ") {
    sum = num1   num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "-") {
    sum = num1 - num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "*") {
    sum = num1 * num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "/") {
    sum = num1 / num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  }

})
body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}
<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div>
    <form>
      <input id="num1-el" type="number" value="<? echo $num1; ?>">
  </div>
  <div>
    <select id="cal-el">
      <option value=" "> </option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
  </div>
  <div>
    <input id="num2-el" type="number">
  </div>
  </form>
  <div>
    <button id="submit-btn">Submit</button>
  </div>
  <div id="equals-el">

  </div>
  <script src="index.js"></script>
</body>

</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Because you are initializing num1 = document.getElementById("num1-el").value at the very beginning (when it's empty), and then never updating it. You have to grab it and num2 after you click the button.

Also you have to convert them to number, because they are strings "2", not numbers 2.

2 3 == 5 but "2" "3" == "23".

let num1;
let num2;

let calEl = document.getElementById("cal-el")
let sumEl = document.getElementById("equals-el")
let sum = 0
const submitBtn = document.getElementById("submit-btn")

submitBtn.addEventListener("click", function() {
  
  num1 =  document.getElementById("num1-el").value;
  num2 =  document.getElementById("num2-el").value;
  
  
  if (calEl.value === " ") {
    sum = num1   num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "-") {
    sum = num1 - num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "*") {
    sum = num1 * num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "/") {
    sum = num1 / num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  }

})
body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}
<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div>
    <form>
      <input id="num1-el" type="number" value="<? echo $num1; ?>">
  </div>
  <div>
    <select id="cal-el">
      <option value=" "> </option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
  </div>
  <div>
    <input id="num2-el" type="number">
  </div>
  </form>
  <div>
    <button id="submit-btn">Submit</button>
  </div>
  <div id="equals-el">

  </div>
  <script src="index.js"></script>
</body>

</html>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

A couple of things are wrong here:

  1. You want to sample num1 and num2 values when you click the submit button and not when the code loaded.
  2. Since you're using input, the .value is a string so you need to cast it to number with Number().
  3. Instead of sumEl.innerHTML =, use only sumEl.innerHTML =. Otherwise it will just add another element to the answer.
  4. Since you have the same code <p>The Answer is ${sum}</p>, you can just export it below all of your if else - much cleaner code.
  5. Use variables only when you use them. If you don't need them in high scope - don't define them there just because you can.

let calEl = document.getElementById("cal-el");
let sumEl = document.getElementById("equals-el");
const submitBtn = document.getElementById("submit-btn");

submitBtn.addEventListener("click", function() {
  let sum = 0;
  let num1 = Number(document.getElementById("num1-el").value);
  let num2 = Number(document.getElementById("num2-el").value);

  if (calEl.value === " ") {
    sum = num1   num2
  } else if (calEl.value === "-") {
    sum = num1 - num2
  } else if (calEl.value === "*") {
    sum = num1 * num2
  } else if (calEl.value === "/") {
    sum = num1 / num2
  }

  sumEl.innerHTML = `<p>The Answer is ${sum}</p>`


})
body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}
<form>
  <input id="num1-el" type="number" value="<? echo $num1; ?>">
  <div>
    <select id="cal-el">
      <option value=" "> </option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
  </div>
  <div>
    <input id="num2-el" type="number">
  </div>
</form>
<div>
  <button id="submit-btn">Submit</button>
</div>
<div id="equals-el">
</div>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You must take values from input inside the function as a event is needed to take the values (sometimes it is onchange, oninput ...).

As the initial values of input are null means it is empty(on load of script and variables are taking that only). But when you use any event they are filled by now and the updated values will be taken into the variables

Also use Number() to convert string to number

let sum = 0
const submitBtn = document.getElementById("submit-btn")

submitBtn.addEventListener("click", function() {
  let num1 = document.getElementById("num1-el").value
  let num11 = Number(num1)
  let num2 = document.getElementById("num2-el").value
  let num22 = Number(num2)


  let calEl = document.getElementById("cal-el")
  let sumEl = document.getElementById("equals-el")

  if (calEl.value === " ") {
    sum = num11   num22
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "-") {
    sum = num1 - num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "*") {
    sum = num1 * num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "/") {
    sum = num1 / num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  }

})
body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}
<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div>
    <form>
      <input id="num1-el" type="number" value="<? echo $num1; ?>">
  </div>
  <div>
    <select id="cal-el">
      <option value=" "> </option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
  </div>
  <div>
    <input id="num2-el" type="number">
  </div>
  </form>
  <div>
    <button id="submit-btn">Submit</button>
  </div>
  <div id="equals-el">

  </div>
  <script src="index.js"></script>
</body>

</html>
<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

First of all, I'd recommend reading something about server/client sided programming to get the difference between languages like Javascript and PHP. A good start might be
What is the difference between client-side and server-side programming?.

To address some of the issues with your code:

  1. the HTML is invalid, not all elements that are opened are also closed. Consider using a linter or validator

  2. value="<? echo $num1; ?>" is syntax, not needed here.

  3. The <form> is commonly used to progress something, with a custom action. My guess is you can simplify the code by just using the onClick:

  4. You're getting the num1-el and num2-el values before the button is pressed, lets move that inside the onClick so we're sure we have the up-to-date values.

  5. Since . value returns a string, we'll need to use Number() to convert it to a real number

  6. Since you're always doing the sumEl.innerHTML = ..., we can move that outside the if/else to make it somewhat more readable.

const btn = document.getElementById("submit-btn")
btn.addEventListener("click", function() {

  let num1 = Number(document.getElementById("num1-el").value);
  let num2 = Number(document.getElementById("num2-el").value);

  let calEl = document.getElementById("cal-el")
  let sumEl = document.getElementById("equals-el")
  let sum = 0;

  if (calEl.value === " ") {
    sum = num1   num2;
  } else if (calEl.value === "-") {
    sum = num1 - num2;
  } else if (calEl.value === "*") {
    sum = num1 * num2;
  } else if (calEl.value === "/") {
    sum = num1 / num2;
  }
  
  sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
});
body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

input, select, button {
  width: 100px;
}
<div class='container'>
    <input id="num1-el" type="number">
    <select id="cal-el">
        <option value=" "> </option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input id="num2-el" type="number">
    <button id="submit-btn">Calculate</button>
    <div id="equals-el">
</div>
<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Any value toke from input, textarea, select or other HTML element using javascript, by default it data type is string until using data type casting (converted to a new variable and another data type) on this value.

Also, You can use switch() instead if() statement, to make your code more clear , and more understable.

const submitBtn = document.getElementById("submit-btn");
submitBtn.addEventListener("click", function() {
  let sum = 0;
  let num1 = Number(document.getElementById("num1-el").value);
  let num2 = Number(document.getElementById("num2-el").value);
  let calEl = document.getElementById("cal-el");
  let sumEl = document.getElementById("equals-el");
  switch(calEl.value){
    case " ": {sum = num1   num2;break;}
    case "-": {sum = num1 - num2;break;}
    case "*": {sum = num1 * num2;break;}
    case "/": {sum = num1 / num2;break;}
    // If the user didn't select the operator ( ,-,* or /) then the defualt operator is ' ';
    default:  {sum = num1   num2;break;}
  }
  sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`;
});
body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}
<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div>
    <form>
      <input id="num1-el" type="number" value="<? echo $num1; ?>">
  </div>
  <div>
    <select id="cal-el">
      <option value=" "> </option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
  </div>
  <div>
    <input id="num2-el" type="number">
  </div>
  </form>
  <div>
    <button id="submit-btn">Submit</button>
  </div>
  <div id="equals-el">

  </div>
  <script src="index.js"></script>
</body>

</html>
<iframe name="sif6" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/Mobile/172234.html

Prev:Angular hide element from child component
Next:Related to user data in web development
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding