DOM changes Script content

The document object model or “DOM” can do many things within markup and script, chiefly It sends values to the javascript when called and returns it after the script has run.

The basics of the DOM are already talked about in a previous post so lets show another field the DOM method operates in.

For our Week 11 lectures in Programming I, at Kansas State University we used the DOM method to demostrate how the DOM makes changes to content, like turning a upset “sad” face image that is linked through wikimedia to a smiling “happy” face by clicking a button.

The button is programmed with an ID that links “data01” from the HTML to the Javascript and is programmed to execute the function “changeContent()” when the button is pressed through an onclick event. The function “changeContent()” does exactly how it reads by taking the linked picture and changing the data of that link to the link of a different picture. The code of how this is done is shown here:

In the first picture you can see the button whose “onclick” event calls the function that changes the faces. Located in the second picture you can see the HTML that calls the first picture.

You can see within this function that “//lesson three…” changes the source of img01, which is the frowning face, to a source of a smiling face. The function changes other aspects of the HTML as well, however, the images changes was the most influential part of this lesson and the easiest to digest therefore I thought it would be more interesting to read. Here is the end result:

then the button is pressed,
and you receive a different header and a smiley face.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s