Question 245228 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Elements not acting as a placeholder for a value?

Am a bit stuck here, been making a lot of progress on this project I’m doing as an aspiring web developer but cannot figure this functionality out. Cant figure out why my event listener does not return the values for the calculator equation and brings back the original element instead with the input tags. Run the code to see what I mean. I thought my getElementID would be taking care of setting up the element to recieve a value but I guess not?

<!DOCTYPE html>
<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>
            <fieldset>
                <label for="input1"></label><br>
                <input id="input1" type="number" placeholder="Number 1"><br>        
            </fieldset>
            <div class="buttons">
                <button id="button1" type="button">+</button>
                <button id="button2" type="button">-</button>
                <button id="button3" type="button">*</button>
                <button id="button4" type="button">/</button>
            </div>
            <fieldset>
                <label for="input2"></label><br>
                <input id="input2" type="number" placeholder="Number 2"><br>    
            </fieldset>
            <input id="result" type="number" readonly>
            <div id="clearScreen">
                <button type="button">Clear</button>
            </div>
    </form>
    </body>
    <script>
        function buttons() {
        var in1 = document.getElementById("input1");
        var in2 = document.getElementById("input2");
        var res = document.getElementById("result");
        var add = document.getElementById("button1");
        var sub = document.getElementById("button2");
        var mul = document.getElementById("button3");
        var div = document.getElementById("button4");

            add.addEventListener("click", function() {
                res.textContent = in1.valueAsNumber + in2.valueAsNumber;
                console.log(res);
            });
        }

        buttons()
    </script>
</html>

what am I doing wrong?

Tags:

2

Answers


  1. 0

    You’re partially right, getElementByID takes care of getting the element. and with input.textContent, you can get the element inside as a string. I think in1.valueAsNumber is not doing it’s job here. You can try this instead. I hope it helps. You can change parseInt <=> parseFloat based on your requirement.

     add.addEventListener("click", function() {
                
                res.value = parseInt(in1.value) +parseInt( in2.value);                
                console.log(res.textContent);
            });
    Login or Signup to reply.
  2. 0

    So i did some research and i found that textContent returns the entire text of a element, so instead of returning only the value, lets say something like 23, it returns the the tag itself as text, something like -> <input id="input2" type="number">23<br>.

    Font –>The first answer especificaly

    What i would recomend is using a variable alone to hold the result and then console.log() it or display it using innerHTML because it only changes the visible content, if you want to display the result somewhere.

    <!DOCTYPE html>
<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>
      <fieldset>
        <label for="input1"></label><br />
        <input id="input1" type="number" placeholder="Number 1" /><br />
      </fieldset>
      <div class="buttons">
        <button id="button1" type="button">+</button>
        <button id="button2" type="button">-</button>
        <button id="button3" type="button">*</button>
        <button id="button4" type="button">/</button>
      </div>
      <fieldset>
        <label for="input2"></label><br />
        <input id="input2" type="number" placeholder="Number 2" /><br />
      </fieldset>
      <input id="result" type="number" readonly />
      <div id="clearScreen">
        <button type="button">Clear</button>
        <div id="displayer">        //div where the result will be displayed

        </div>
      </div>
    </form>
  </body>
  <script>
    function buttons() {
      var in1 = document.getElementById("input1");
      var in2 = document.getElementById("input2");
      var res = document.getElementById("result");
      var add = document.getElementById("button1");
      var sub = document.getElementById("button2");
      var mul = document.getElementById("button3");
      var div = document.getElementById("button4");

      var displayer = document.getElementById("displayer");    //gets the id of that div

      add.addEventListener("click", function () {
        res = in1.valueAsNumber + in2.valueAsNumber;  //hold the result in a variable
        displayer.innerHTML = res     //displaying it
        console.log(res);
      });
    }

    buttons();
  </script>
</html>

    Also, i saw that you used an eventListener to do the calculations for add, i dont know if you will do this for every operation, but you could use a switch, it will help it the readability of your code.

    Sorry for any gramar mistakes, english isn`t my first language.

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

Back To Top
Search