如何使JAVASCRIPT变量等于HTML属性？

Question

I am basically trying to have a number displayed that starts at 0 and goes up randomly every time you press a button. But I need a variable to equal the current number(which is stored within an h1 tag). How do I do that? Currently when I try to check if it worked by alerting the page, all I get is [object HtmlHeadingElement] Here is my JavaScript, CSS, and HTML code, respectively:

 function myRandom() { var headnumber = document.getElementById('headnum'); alert(headnumber) //the alert is just to check if '0' comes up' } 

 h1 { text-align: center; font-size: 30px; color: blue; font-family: Verdana; } button { margin-left: 640px; border: solid blue 5px; font-size: 14px; font-family: Verdana; font-weight: bold; background-color: cyan; border-radius: 6px; } 

 <h1 id='headnum'>3</h1> <button onclick="myRandom()">Button</button> 

Answer 1

You could get the html content using innerHTML. See below,

 function myRandom() { var headnumber = document.getElementById('headnum').innerHTML; alert(headnumber) //the alert is just to check if '0' comes up' } 

 h1 { text-align: center; font-size: 30px; color: blue; font-family: Verdana; } button { margin-left: 640px; border: solid blue 5px; font-size: 14px; font-family: Verdana; font-weight: bold; background-color: cyan; border-radius: 6px; } 

 <h1 id='headnum'>3</h1> <button onclick="myRandom()">Button</button> 

Answer 2

The assignment of headnumber is to an object returned by the document.getElementById('headnum') function call. In order to get the value inside the object use document.getElementById('headnum').innerHTML