Change HTML attributes

Except HTML content, and CSS properties, in JS we have the ability to change the HTML attributes of an element. For example we can change the src attribute of an image element in order to depict another image after an event.

This is what is happening on the example above as we use the two main functions that deal with HTML attributes.

element.getAttribute(nameOfAttribute). This is a getter function, that reads-only the specified attribute that is passed as a string argument inside the parentheses. This happens at line 15 in our case, as we print the current src attribute's value of the image.

Then on click of the button, we dynamically change the src attribute by using the element.setAttribute(attribute, value) function. The first argument accepts again as string the attribute of the element that is about to change, and the second argument the new, updated value that this attribute will hold. 

In our example above on click of the button we change the picture that is being shown from Hamburg to Berlin.