How to call functions with variable parameters

Question

I'm trying to type text into the textbox and when I click the button have it alert me the text. I can't seem to get the variable to work in the function. I'm not sure if "var i = document.getElementById('apple').value;" is correct.

document.querySelector("input[type=button]").addEventListener("click", function(event){

alert(i);});

<form>
Enter:<br>
<input type="text" name="inputbox" id="apple">
<input type="button" name="alert" value="alert">
</form>

<script>
var i = document.getElementById('apple').value;

document.querySelector("input[type=button]")
     .addEventListener("click",function(event){

alert(i);});
</script>

Demo: http://codepen.io/michaelaharvey/pen/QyKvme

I also tried:

var i = form.inputbox.value;

but that didn't work either

You have to put the line that gets the value inside the event handler for click. Right now it only gets the value on pageload, not everytime you click — adeneo
– adeneo, Commented Dec 24, 2015 at 23:47

Josh Beam · Accepted Answer · 2015-12-24 23:47:48Z

4

document.querySelector("input[type=button]")
.addEventListener("click",function(event){
  var i = document.getElementById('apple').value;
  alert(i);
});

You need to query for the value at the time of click.

answered Dec 24, 2015 at 23:47

Josh Beam

19.9k5 gold badges48 silver badges69 bronze badges

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

Comments

Josh Crozier · Accepted Answer · 2015-12-24 23:48:03Z

3

The problem is that you are storing the element's value in a variable when the DOM loads. Therefore when the click event is fired, the value property is an empty string (or whatever the value was when the DOM loaded).

Retrieve the value when the click event is fired instead:

Updated Example

document.querySelector("input[type=button]").addEventListener("click", function(event) {
  var value = document.getElementById('apple').value
  alert(value);
});

answered Dec 24, 2015 at 23:48

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Collectives™ on Stack Overflow

How to call functions with variable parameters

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