4
<input id="email" name="email" type="text" value="ooooo@gmail.com">

How do I get value of id=email and print it out to my console or anywhere for testing purposes ?

I tried, but no luck :(

<script type="text/javascript">
    document.getElementById('email').innerText;
</script>
General Grievance
  • 4,555
  • 31
  • 31
  • 45
iori
  • 3,236
  • 12
  • 43
  • 78
  • 2
    You want to use `.value`, not `.innerText`. – hon2a Nov 25 '14 at 20:17
  • 1
    Keep in mind that not all browsers support console, and some will throw an error if you try to use the console object http://stackoverflow.com/questions/14086675/which-browsers-support-console-log – Hoppe Nov 25 '14 at 20:21
  • I guess I should consider using .innerText – iori Nov 25 '14 at 20:21
  • 1
    `document.getElementById('email').value`. Incidentally if you are debugging interactively with chrome $0 to $4 remembers the last five DOM elements you've selected in the developer tools so you can simply run $0.value in the console. – Sam Greenhalgh Nov 25 '14 at 20:22
  • 1
    @Hoppe, pointless link and discussion.. console.log is for development purposes.. ontop of which, it's an easy pollyfill – Brett Caswell Nov 25 '14 at 20:26

9 Answers9

6

There are two types of elements

  1. Block - these can be accessed with - .innerHTML or .html() in jquery like div's span's etc
  2. Non Block Elements - these can be accessed by .value or .val() in jquery, like input types etc

all you need o do is

console.log($('#email').val())  //jquery

or 

console.log(document.getElementById('email').value); // javascript
Ekansh Rastogi
  • 2,418
  • 2
  • 14
  • 23
3

try 

console.log($('#email').val());
Yosoyke
  • 485
  • 3
  • 12
  • 1
    But you'll have to add it to an event, like an onclick of a button of value changed event of that input to log it in the console – Yosoyke Nov 25 '14 at 20:18
  • Is `alert`, and `console.log` are the only 2 ways to print out the value base on ID if an element ? I'm looking for a better alternative. – iori Nov 25 '14 at 20:27
2

Without jQuery:

console.log(document.getElementById('email').value);
xphong
  • 1,114
  • 2
  • 13
  • 20
  • Is `alert`, and `console.log` are the only 2 ways to print out the value base on ID if an element ? I'm looking for a better alternative. – iori Nov 25 '14 at 20:28
  • 1
    If you have another div, you can output the result to that div. Ex: `document.getElementById('textDiv').innerHTML = document.getElementById('email').value` – xphong Nov 25 '14 at 20:32
  • @evoque2015: Better how? Why is `console.log()` insufficient for you? – six fingered man Nov 25 '14 at 20:35
1

Try an alert...

http://jsfiddle.net/nemb666L/

var email = $("#email").val();
alert(email);
EricBellDesigns
  • 955
  • 1
  • 9
  • 33
  • 2
    I'm not sure why people even do alerts anymore.. just use the console.log.. it's much easier to test code using the intermediate console, developers need to become more familiar with it. – Brett Caswell Nov 25 '14 at 20:23
  • "console.log is only suitable for live debugging and behaves differently in Firefox, Chrome and IE (in IE it will display the same text as the alert)." I guess it depends on the situation... – EricBellDesigns Nov 25 '14 at 20:35
1

this will 'print' the entire object to the console

console.log("input[id='email'] - %o", document.getElementById('email'));
Brett Caswell
  • 732
  • 1
  • 4
  • 16
0

It works

console.log(email.value)
0

In the Chrome dev tools console drop the .value:

document.getElementById('#id')
cjjenkinson
  • 359
  • 4
  • 7
0
let inputId = document.querySelector("#email");
console.log(inputId.value);
SaBah
  • 13
  • 5
  • 1
    Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Feb 13 '23 at 18:52
-1

If email(your id) is not defined, just:

email.innerHTML

enter image description here

Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
HumeNi
  • 7,788
  • 1
  • 11
  • 9