Question 43343 in Html Question posted in
Some basic documentation can be found here.

Problems with simple calculator using html

Ive been trying my hand in html.
Basically I just have to input field and want to add the two numbers together and display it in one of the input field.

The two inputs:

<input type="text" id="Num1" name="One"> <br>
<input type="text" id="Num2" name="Two"> <br>

Function for addition:

function calc(a,  b) {
        c = a + b;
        document.getElementById("Num1").value = c;
}

Button click action:

<button onclick="calc(document.getElementsByName('One').value, 
                        document.getElementsByName('Two').value);">

    </button>

Output is "NaN", however if I used ElementById or ElementByName on function and button, nothing happens, if I put in defined numbers in calc() in the button part, I get the correct solution.

Full Code:

<!DOCTYPE html>
<html>
  <head>
    <title>The getElementById() Function</title>
    <script>

      function updateParagraphText(){
        let labelElement = document.getElementById('label');

        labelElement.innerText = 'You clicked the button!';
        
      }
      function calc(a,  b) {
        c = a + b;
        document.getElementById("Num1").value = c;
      }
    </script>
  </head>
  <body>
    <p id="label">
      Click the button.
    </p>
    <button onclick="calc(document.getElementsByName('One').value, document.getElementsByName('Two').value);">
    </button>
  </body>

  <form>
    <input type="text" id="Num1" name="One"> <br>
    <input type="text" id="Num2" name="Two"> <br>
  </form>
</html>
Tags:

3

Answers


  1. 0

    If I’m not mistaken you’re having problems because document.getElementsByName('One') returns an array of elements (which contains only one element, yours).

    You should try document.getElementsByName('One')[0].value.

    Consider also casting the values to ints since those can be arbitrary strings by default.

    See this working example: https://jsfiddle.net/wtpL2q80/9/

    Login or Signup to reply.
  2. 0

    you can use document.getElementById('Num1').value instead of document.getElementsByName('One').value and use parseInt to be able to sum them properly

    Login or Signup to reply.
  3. 0

    You need to use getElementById. The full code:

    <!DOCTYPE html>
<html>
  <head>
    <title>The getElementById() Function</title>
    <script>
      function updateParagraphText(){
        let labelElement = document.getElementById('label');
        labelElement.innerText = 'You clicked the button!';
      }
      function calc(a,  b) {
        c = parseInt(a) + parseInt(b);
        document.getElementById("Num3").value = c;
      }
    </script>
  </head>
  <body>
    <p id="label">
      Click the button.
    </p>
    <button onclick="calc(document.getElementById('Num1').value, document.getElementById('Num2').value); updateParagraphText()">Button</button>
  </body>

  <form>
    <input type="text" id="Num1"> <br>
    <input type="text" id="Num2"> <br>
    <input type="text" id="Num3"> <br>
  </form>
</html>

    I also corrected the values, because they were string instead of integers or float. Use parseFloat if it’s the case. I also added a third input to input the see the result, but you can use the second (Num2) and remove the third.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search