CODEWITHSUNDEEP
javascript
elhousseyn
elhousseyn

Reputation: 3

Getting an input from a form using JavaScript in html

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>

Upvotes: 0

Views: 74

Answers (2)

cse
cse

Reputation: 4104

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>

Upvotes: 1

Matt Davis
Matt Davis

Reputation: 1337

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;

Upvotes: 0

Related Questions