How to grab a text inside a div using JavaScript?

Question

I'm trying to grab the text inside my #address div using JS. For some reason, I keep getting a null value. Please correct me if I did anything that I am not supposed to. Here is what I've tried:

function myFunction() {
  var uri = "www. google.com";
  var res = encodeURIComponent(uri);
  var address = document.getElementById("address");

  console.log(uri); // print out = www. google.com
  console.log(res); // print out = www.%20google.com
  console.log(address); // print out = null ????
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<div id="address"> 410 Walker Street Lowell MA 01851</div>
<h1>console.log();</h1>
<button onclick="myFunction()">Run</button>

Answer 1

You're getting the DOMElement, but not retrieving the text from it. To do that use innerText. Try this:

function myFunction() {
  var uri = "www. google.com";
  var res = encodeURIComponent(uri);
var address = document.getElementById("address").innerText; // note innerText here

  console.log(uri); // print out = www. google.com
  console.log(res); // print out = www.%20google.com
  console.log(address); // print out = null ????
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<div id="address"> 410 Walker Street Lowell MA 01851</div>
<h1>console.log();</h1>
<button onclick="myFunction()">Run</button>

Or alternatively, as you've tagged this question with jQuery:

var address = $('#address').text();

Also note that you've set id="addess" in the HTML, which appears to be a typo.

Answer 2

Do this:

var address = document.getElementById("address").innerHTML;