Using Javascript's getElementsByName and outputting a result using getElementById

Question

I am having trouble grabbing multiple input's using the inputs name and adding multiplications to them like below. Is there another way I can do this without using getElementById ?

<input type="number" name="test1" id="RoundInput1">
<input type="number" name="test2" id="RoundInput2">

<button onclick="GetTheResults()">Try it</button>

<p id="demo">Click the button to change the text in this paragraph.</p>

<script>
x = document.getElementsByName("test1").value;
z = document.getElementsByName("test2").value;
var Savings = x + z;
function GetTheResults() {
document.getElementById("demo").innerHTML = Savings;
}
</script>

Please note I have also tried the following:

x = document.getElementsByName("test1")[0].value;
z = document.getElementsByName("test2")[0].value;

Note, that you load the values of test1 and test2 just once. By putting the the variables x, z and Savings in the function GetTheResults it will work. — csskevin
– csskevin, Commented Mar 10, 2018 at 12:15
You are only declaring your function GetTheResults, not actually calling it. To call it, just add GetTheResults() before your </script> tag — DrunkDevKek
– DrunkDevKek, Commented Mar 10, 2018 at 12:15

Nitin Goyal · Accepted Answer · 2018-03-10 12:18:11Z

2

<input type="number" name="test1" id="RoundInput1">
<input type="number" name="test2" id="RoundInput2">

<button onclick="GetTheResults()">Try it</button>

<p id="demo">Click the button to change the text in this paragraph.</p>

<script>
    function GetTheResults() {
        x = document.getElementsByName("test1")[0].value;
        // x = document.getElementById("RoundInput1").value;

        z = document.getElementsByName("test2")[0].value;
        // z = document.getElementById("RoundInput2").value;

        var Savings = parseInt(x) + parseInt(z);
        document.getElementById("demo").innerHTML = Savings;
    }
</script>

answered Mar 10, 2018 at 12:18

Nitin Goyal

5174 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SaschaM78 · Accepted Answer · 2018-03-10 12:28:07Z

1

You need to move the document.getElementsByName() calls into the function. You will also need to use parseInt() to convert the inputs into integer values. As the name getElementsByName implies, the returned value is an array of all found elements; in your case you will need to access the first element of the returned array for your addition.

Code

function GetTheResults() {
  x = parseInt(document.getElementsByName("test1")[0].value);
  z = parseInt(document.getElementsByName("test2")[0].value);
  var Savings = x + z;

  document.getElementById("demo").innerHTML = Savings;
}

<input type="number" name="test1" id="RoundInput1">
<input type="number" name="test2" id="RoundInput2">
<button onclick="GetTheResults()">Try it</button>
<p id="demo">Click the button to change the text in this paragraph.</p>

edited Mar 10, 2018 at 12:28

answered Mar 10, 2018 at 12:20

SaschaM78

4,5074 gold badges36 silver badges46 bronze badges

5 Comments

Dayley Over a year ago

Thanks! This seems to work. And also thank you for the explanation. This was just an example I used for StackOverFlow, but it looks like I have about 50 calls to move into my function from what you have stated. So I may be back. Haha.

SaschaM78 Over a year ago

@Dayley you are welcome and thanks for accepting! Sure, feel free to ask again :-)

Dayley Over a year ago

Hi again SaschaM, do you have any means to contact you so I could possibly run a large section of code by you that contain some of what you stated above? With it being a page of code I doubt I would get many replies on here from people.

SaschaM78 Over a year ago

@Dayley let's discuss this in a chat

Dayley Over a year ago

Okay. Joined. :)

Collectives™ on Stack Overflow

Using Javascript's getElementsByName and outputting a result using getElementById

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related