Basic Javascript- HTML button

Question

I'm trying to have a button that submits a text input, and have that input show as an alert. Here's my code so far (which shows an alert with "undefined"):

<p class="text-right">
 <input id="input" type="text" placeholder= "Your Name">
  <button id="submit" type="submit"> Submit</button>
</p>

And my Javascript code:

var input = document.getElementById("input").value;
var submit = document.getElementById("submit");

submit.addEventListener("click", function1);

function function1() {
  alert(input.value);
}

element.value.value doesn't exist. alert(input). Don't redefine submit — Andrew Li
– Andrew Li, Commented Aug 26, 2016 at 13:13

Djaouad · Accepted Answer · 2016-08-26 13:22:54Z

3

var submit = document.getElementById("submit");
submit.addEventListener("click", function1);
function function1() {
    var input = document.getElementById("input").value;
    alert(input);
}

You're alerting input.value.value, but you already have the value in the input variable. EDIT :

var submit = document.getElementById("submit");
var input = document.getElementById("input");
submit.addEventListener("click", function1);
function function1() {
    alert(input.value);
}

Which is declaring the input once, and each time the function is called, you alert it's value.

edited Aug 26, 2016 at 13:22

answered Aug 26, 2016 at 13:15

Djaouad

22.8k4 gold badges37 silver badges57 bronze badges

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

3 Comments

Sergi Over a year ago

But it comes out blank. I don't seem to be able to get that value to show.

Sergi Over a year ago

That did it, I was thinking it was a matter of positioning, I'm an absolute beginner, was it a matter of scope?

Djaouad Over a year ago

No, the variable input was holding the initial value of the input box which is empty, but it's better to just hold the input box in the variable input, and each time the button is clicked, you alert the value. See the last edit, it's better.

Collectives™ on Stack Overflow

Basic Javascript- HTML button

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related