How to alert input value

user6111730 picture user6111730 · Mar 24, 2016 · Viewed 48k times · Source

So I recently decided to try learning app development with Intel XDK, and as of now I know only little bit of HTML.

I'm trying to create a basic test app that allows the user to type a message in a text box, and then click the submit button which gives an alert that displays the inputted text.

This is what I have:

Message:
<br>
<input type="text" id="message" value="">
<br>
<button type="button" value="document.getElementByID(message)" onclick=alert(message)>Generate Text</button>

But when I run the app it displays [object HTMLInputElement].

How can I fix this?

Answer

Roko C. Buljan picture Roko C. Buljan · Mar 24, 2016

to get an element value use

var message = document.getElementById("message").value;
alert( message );

Also, don't use inline JS. Rather assign an event handler

document.getElementById("myButton").addEventListener("click", function() {

    var message = document.getElementById("message").value;
    alert( message );

}, false);

Here's a working example:

var message = document.getElementById("message");
document.getElementById("myButton").addEventListener("click", function() {
    console.log( message.value );
});
<br>
<input type="text" id="message" value="">
<br>
<button id="myButton" type="button">Generate Text</button>