{"id":746,"date":"2017-10-12T13:36:07","date_gmt":"2017-10-12T18:36:07","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=746"},"modified":"2021-01-17T21:26:32","modified_gmt":"2021-01-18T02:26:32","slug":"javascript-demo-of-innerhtml-change","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2017\/10\/12\/javascript-demo-of-innerhtml-change\/","title":{"rendered":"JavaScript: Demo of getElementById( )"},"content":{"rendered":"\n<p>Here is some JavaScript code that demonstrates how to use JavaScript to change HTML text on a page by clicking a button. When the button is clicked, the text is replaced with a random quote.<\/p>\n\n\n\n<p><span class=\"\">\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" name=\"iframe_demo\" src=\"https:\/\/bluegalaxy.info\/js\/random_quote.html\" scrolling=\"no\" width=\"100%\" height=\"280\" id=\"iframe_drop_shadow\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n<\/span><\/p>\n\n\n\n<p><script language=\"JavaScript\"><br \/>\nfunction refreshIframe(name) {<br \/>\n\tvar ifr = document.getElementsByName(name)[0];<br \/>\n\tifr.src = ifr.src;<br \/>\n}<br \/>\n<\/script><\/p>\n\n\n\n<p><button class=\"btn\" onclick=\"refreshIframe('iframe_demo');\">Reset Demo<\/button><\/p>\n\n<script language=\"JavaScript\">\nfunction refreshIframe(name) {\n    var ifr = document.getElementsByName(name)[0];\n    ifr.src = ifr.src;\n}\n<\/script>\n\n\n\n<p>This example uses DOM elements <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">innerHTML<\/code> and <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">document.getElementById()<\/code>. It also uses a couple of Math functions such as <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">Math.floor()<\/code> and <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">Math.random()<\/code>. The button is set up with an &#8220;onclick&#8221; that calls the JavaScript function. For example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;button type=\"button\" onclick='returnRandomQuote()'>Get Quote&lt;\/button><\/pre>\n\n\n\n<p>The <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">returnRandomQuote()<\/code> function does the following:<\/p>\n\n\n\n<p>1.&nbsp; Defines a list of quotes.<br>\n2. Gets a random index from the list and stores it in randomIndex:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var randomIndex = Math.floor(Math.random() * quotes.length);<\/pre>\n\n\n\n<p>3. then uses that randomIndex to load a string from the quotes list:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var randomString = quotes[randomIndex];<\/pre>\n\n\n\n<p>4. Finally, the function uses the DOM elements to update the text of the specified id.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">document.getElementById(\"demo\").innerHTML = randomString\n<\/pre>\n\n\n\n<p>This corresponds to the id=&#8221;demo&#8221; in the paragraph tag of the HTML:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;p id=\"demo\">This text will be replaced by a random quote once the button is clicked.&lt;\/p><\/pre>\n\n\n\n<p>Here is the bare JavaScript:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script language=\"JavaScript\">\nfunction returnRandomQuote() {\n\tvar quotes = [  \"The most technologically efficient machine that man has ever invented is the book.\", \n\t\t\t\"Technology is a word that describes something that doesn't work yet.\", \n\t\t\t\"We are stuck with technology when what we really want is just stuff that works.\", \n\t\t\t\"It's supposed to be automatic, but actually you have to push this button.\", \n\t\t\t\"Technological progress has merely provided us with more efficient means for going backwards.\", \n\t\t\t\"The human spirit must prevail over technology.\", \n\t\t\t\"The great myth of our times is that technology is communication.\", \n\t\t\t\"Technology made large populations possible; large populations now make technology indispensable.\", \n\t\t\t\"Computers are useless. They can only give you answers.\", \n\t\t\t\"Any sufficiently advanced technology is equivalent to magic.\" ]\n\t\n\tvar randomIndex = Math.floor(Math.random() * quotes.length);\n\tvar randomString = quotes[randomIndex];\n\tdocument.getElementById(\"demo\").innerHTML = randomString\n}\n&lt;\/script><\/pre>\n\n\n\n<p>Here is the more complete code that shows the JavaScript code with comments, in the context of the HTML document:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n  &lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto\" rel=\"stylesheet\">\n&lt;style>\n  body {\n      font-family: 'Roboto', sans-serif;\n      font-size: 24px;\n  }\n&lt;\/style>\n&lt;\/head>\n&lt;body>\n\n  &lt;script language=\"JavaScript\">\n  \tfunction returnRandomQuote() {\n\n    \t\/\/ Create a list of string quotes\n    \tvar quotes = [  \"The most technologically efficient machine that man has ever invented is the book.\",\n                      \"Technology is a word that describes something that doesn't work yet.\",\n                      \"We are stuck with technology when what we really want is just stuff that works.\",\n                      \"It's supposed to be automatic, but actually you have to push this button.\",\n                      \"Technological progress has merely provided us with more efficient means for going backwards.\",\n                      \"The human spirit must prevail over technology.\",\n                      \"The great myth of our times is that technology is communication.\",\n                      \"Technology made large populations possible; large populations now make technology indispensable.\",\n                      \"Computers are useless. They can only give you answers.\",\n                      \"Any sufficiently advanced technology is equivalent to magic.\" ]\n\n        \/\/ Use random() to get a random index from the list\n        \/\/ Math.floor() rounds a float down to its nearest integer\n        \/\/ Math.random() returns a random number between 0 (inclusive) and 1 (exclusive) \n        var randomIndex = Math.floor(Math.random() * quotes.length);\n\n        \/\/ Use randomIndex to get a random string from the list\n\tvar randomString = quotes[randomIndex];\n\n        \/\/ innerHTML is a DOM object\n        \/\/ document.getElementById() is an HTML DOM object.\n        document.getElementById(\"demo\").innerHTML = randomString\n  \t}\n  &lt;\/script>\n\n&lt;h2>Demo of innerHTML change&lt;\/h2>\n\n&lt;p id=\"demo\">This text will be replaced by a random quote once the button is clicked.&lt;\/p>\n\n&lt;button type=\"button\" onclick='returnRandomQuote()'>Get Quote&lt;\/button>\n\n&lt;\/body>\n&lt;\/html>\n<\/pre>\n\n\n\n<p>For more information about some of the JavaScript features used in this demo, see:<br>\n<a href=\"https:\/\/www.w3schools.com\/jsref\/jsref_random.asp\">Math.random()<\/a><br>\n<a href=\"https:\/\/www.w3schools.com\/jsref\/jsref_floor.asp\"> Math.floor()<\/a><br>\n<a href=\"https:\/\/www.w3schools.com\/jsref\/met_document_getelementbyid.asp\">document.getElementById()<\/a><br>\n<a href=\"https:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp\">innerHTML<\/a><\/p>\n\n\n\n<p>For more examples of what can be done using the <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">document.getElementById()<\/code> DOM object, such as changing an image, showing new HTML, hiding HTML, or changing CSS styles, see:<br>\n<a href=\"https:\/\/www.w3schools.com\/js\/js_intro.asp\">JavaScript Introduction<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is some JavaScript code that demonstrates how to use JavaScript to change HTML text on a page by clicking a button. When the button is clicked, the text is replaced with a random quote. Reset Demo This example uses DOM elements innerHTML and document.getElementById(). It also uses a couple of Math functions such as &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2017\/10\/12\/javascript-demo-of-innerhtml-change\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">JavaScript: Demo of getElementById( )<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[49,53,50,45,52,51],"class_list":["post-746","post","type-post","status-publish","format-standard","hentry","category-javascript-language","tag-dom","tag-getelementbyid","tag-innerhtml","tag-javascript","tag-math-floor","tag-math-random"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/746","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=746"}],"version-history":[{"count":19,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/746\/revisions"}],"predecessor-version":[{"id":3367,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/746\/revisions\/3367"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=746"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}