Getting an input from a form using JavaScript in html

Question

I have created an input form in html and trying to get the value of this input field using JavaScript.

When I alert it, to check if it works, it returns an empty value. The code is below. What could be the problem?

var num1 = document.getElementById('numb1').value;
var num2 = document.getElementById('numb2').value;
var button = document.getElementsByTagName('button');
var show = document.getElementById('shows');
for (let i = 0; i < button.length; i++) {
  if(button[i].id == 'plus'){
    button[i].onclick = function (){
      var a = num1 + num2;
      alert(a);
    }   
  } 
}

<div class="container">
  <div class="set">
    <input type="text" id="numb1" placeholder="enter a number" >
    <input type="text" id="numb2" placeholder="enter a number">
    <div class="buttons">
      <button id="plus">+</button>
      <button id="min">-</button>
      <button id="mult">*</button>
      <button id="div">/</button>
    </div>
    <div class="show" id="shows"></div>
  </div>
</div>

cse · Accepted Answer · 2019-09-27 17:19:14Z

This because you have kept following lines outside the callback function:

var num1 = document.getElementById('numb1').value;
var num2 = document.getElementById('numb2').value;

So, num1 and num2 are initialized only once i.e. at page load-time. At this time both (num1 and num2) having empty value. Hence it not being initialized every time and showing and empty value.

Note:

Consider to parse input text into numeric values using parseInt() or parseFloat()
You should keep your JavaScript code in <script> tag.

Following is corrected code snippet:

var button = document.getElementsByTagName('button');
var show = document.getElementById('shows');
for (let i = 0; i < button.length; i++) {
	if(button[i].id == 'plus'){
		button[i].onclick = function (){
			var num1 = document.getElementById('numb1').value;
			var num2 = document.getElementById('numb2').value;
				var a = parseFloat(num1 )+ parseFloat(num2);
				alert(a);
		}   
	} 
}

<div class="container">
    <div class="set">
		<input type="text" id="numb1" placeholder="enter a number" >
		<input type="text" id="numb2" placeholder="enter a number">
		<div class="buttons">
			<button id="plus">+</button>
			<button id="min">-</button>
			<button id="mult">*</button>
			<button id="div">/</button>
		</div>
		<div class="show" id="shows"></div>
	</div>
</div>

Matt Davis · Accepted Answer · 2019-09-27 16:49:53Z

You need to get the value of the inputs when the button is clicked, not when the page loads.

var button = document.getElementsByTagName('button');
var show = document.getElementById('shows');
for (let i = 0; i < button.length; i++) {
if(button[i].id == 'plus'){
    button[i].onclick = function (){
        var num1 = parseFloat(document.getElementById('numb1').value);
        var num2 = parseFloat(document.getElementById('numb2').value);
        var a = num1 + num2;
        alert(a);
    }   
} 
}

The above code will get the value of the inputs when the button is clicked. I also presumed you would want the values converting to float, if this is not the case then remove the parseFloat function to make it:

var num1 = document.getElementById('numb1').value;
var num2 = document.getElementById('numb2').value;

Collectives™ on Stack Overflow

Getting an input from a form using JavaScript in html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related