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?

http://stackoverflow.com/questions/11563638/javascript-get-input-text-value — Lyle Rolleman, Mar 24 '16 at 22:40

Roko C. Buljan · Answer 1 · 2018-01-31T11:01:24.530

4

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>

edited Jan 31 '18 at 11:01

answered Mar 24 '16 at 22:43

Roko C. Buljan

196,159
39
305
313

Could you just use `alert(message.value)` ? – guest271314 Mar 24 '16 at 22:45
@guest271314 yes you can is you have your element stored into a `message` variable. – Roko C. Buljan Mar 24 '16 at 22:46
@RokoC.Buljan Believe `id` is global – guest271314 Mar 24 '16 at 22:49
@guest271314 see my comment on your own answer. – Roko C. Buljan Mar 24 '16 at 22:51
@RokoC.Buljan Referenced your solution at own Answer. – guest271314 Mar 24 '16 at 23:15

score 1 · Answer 2 · edited May 23 '17 at 12:07

1

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>

edited May 23 '17 at 12:07

Community

1
1

answered Mar 24 '16 at 22:48

guest271314

1
15
104
177

Relying on `message` being a HTMLDOMIDElement is démodée. Add a `message` variable in your logic and see your program fail. – Roko C. Buljan Mar 24 '16 at 22:50
@RokoC.Buljan Am not familiar with "démodée" ? What does term mean ? _"Add a message variable in your logic and see your program fail"_ Well, yes; there should not be two identifiers or variables with the same name – guest271314 Mar 24 '16 at 22:53

score 0 · Answer 3 · edited Mar 25 '16 at 16:45

0

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>

edited Mar 25 '16 at 16:45

Paul Roub

36,322
27
84
93

answered Mar 24 '16 at 22:47

John Slegers · Answer 4 · 2016-03-24T23:06:03.560

0

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>

edited Mar 24 '16 at 23:06

answered Mar 24 '16 at 22:53

John Slegers

45,213
22
199
169

Sidenote: It's not good practice to rely on global ID variable referrers. Also it's not good practice to write inline JS. – Roko C. Buljan Mar 24 '16 at 22:56
@RokoC.Buljan : I know. See the updated version of my answer. – John Slegers Mar 24 '16 at 23:11

Nikola Stojaković · Answer 5 · 2016-03-24T23:02:56.937

-1

You need to type this in value parameter of button:

document.getElementById(message).value

Thanks for fixing me guys.

edited Mar 24 '16 at 23:02

answered Mar 24 '16 at 22:38

Nikola Stojaković

2,257
4
27
49

what is `.text()` in JavaScript? – Roko C. Buljan Mar 24 '16 at 22:39
@RokoC.Buljan Sorry, I added brackets accidentally. – Nikola Stojaković Mar 24 '16 at 22:40
you mean... `innerHTML` or `textContent` ? Even than it's an `input` and `value` should be used. – Roko C. Buljan Mar 24 '16 at 22:41
@RokoC.Buljan It returns the text of an element. – Nikola Stojaković Mar 24 '16 at 22:42
pretty sure it's .value for input fields – Lyle Rolleman Mar 24 '16 at 22:42
Yup, my mistake. It's value. – Nikola Stojaković Mar 24 '16 at 22:42
What's `getElementByID`? JavaScript is case sensitive. – Quentin Mar 24 '16 at 22:44
@Quentin, it's calledd typo, I guess. Anyway, thanks for noticing. – Nikola Stojaković Mar 24 '16 at 23:03

How to alert input value

5 Answers5

Note

Linked