{"id":295,"date":"2021-06-08T10:26:47","date_gmt":"2021-06-08T09:26:47","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/?page_id=295"},"modified":"2021-06-08T15:46:23","modified_gmt":"2021-06-08T14:46:23","slug":"referencing-page-elements","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/javascript\/referencing-page-elements\/","title":{"rendered":"Referencing Page Elements"},"content":{"rendered":"

\"\"For JavaScript functions to modify page elements, it must know how to identify them.<\/p>\n

this<\/h1>\n

this<\/strong> is a reference to the containing element of the event call.<\/p>\n

“this” can be passed as an actual parameter from the action event to a function’s formal parameter.<\/p>\n

In this example either paragraph will be modified:<\/p>\n

\r\nfunction highlight(element) {\r\n    element.style.backgroundColor = "red";\r\n}\r\n\r\nfunction removehightlight(element) {\r\n    element.style.backgroundColor = "white";\r\n}\r\n<\/pre>\n
\r\n<p onmouseover="highlight(this)" onmouseout="removehightlight(this)">I am special.<\/p>\r\n \r\n<p onmouseover="highlight(this)" onmouseout="removehightlight(this)">So am I.<\/p>\r\n<\/pre>\n
 <\/p>\n
\"\"<\/a>Document Object Model (DOM)<\/h1>\n
“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”<\/em><\/p>\n
The getElementById<\/strong> method can be used to access and change the properties of any page element that has an id.<\/p>\n
In this example, a hidden paragraph is displayed when a button is clicked.<\/p>\n
\r\nfunction showMessage() {\r\n    element = document.getElementById("secretMessage")\r\n\telement.style.display="block";\r\n}\r\n<\/pre>\n
\r\n<p id="secretMessage" style="display:none;">This is a secret message<\/p>\r\n \r\n<button onclick="showMessage()">Show the Message<\/button>\r\n<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
For JavaScript functions to modify page elements, it must know how to identify them. this this is a reference to the containing element of the event call. “this” can be passed as an actual parameter from the action event to a function’s formal parameter. In this example either paragraph will be modified: function highlight(element) { element.style.backgroundColor = "red"; } function removehightlight(element) { element.style.backgroundColor = "white"; } <p onmouseover="highlight(this)" onmouseout="removehightlight(this)">I am<\/p>\n
Read More<\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"parent":259,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-295","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/comments?post=295"}],"version-history":[{"count":9,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/295\/revisions"}],"predecessor-version":[{"id":306,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/295\/revisions\/306"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/259"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/media?parent=295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}