How to alert input value

Question

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 1

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> 

Answer 2

But when I run the app it displays "[object HTMLInputElement]". How do I fix this?

message at html , javascript references element having id "message" . You are calling alert() with DOM element #message as parameter. To correct this you can pass .value property of #message : message to alert(message.value) .

Note, see Why don't we just use element IDs as identifiers in JavaScript? .

You could alternatively attach a click event to button element and call alert(document.getElementById("message")) within click handler, as demonstrated by @RokoC.Buljan solution .

You are missing quotes around alert() at onclick , and .value at message

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

Answer 3

You must use this function in alert and value just is a parameter that show as a button Try this instead:

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

Answer 4

document.getElementByID(message) doesn't belong in the value attribute of your button, but should be inside your alert :

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

Note

It's generally recommended to separate your HTML code from your JavaSCript code and use Document.getElementById() instead of the HTML attribute onclick for adding click events.

So, that means it's best to rewrite the code here-above like this :

 document.getElementById("button").addEventListener("click", function() { alert(document.getElementById('message').value); }); 

 Message: <br> <input type="text" id="message" value=""> <br> <button type="button" id="button">Generate Text</button> 

Answer 5

You need to type this in value parameter of button:

document.getElementById(message).value

Thanks for fixing me guys.