Digital humanities

Maintained by: David J. Birnbaum (djbpitt@gmail.com) Last modified: 2021-12-27T22:03:48+0000

JavaScript Class Example

In class example from 2013-11-20

Here is our test HTML, which utilizes @id and @class attributes to be used in our JavaScript functions.

<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>JavaScript</title>
        <script type="text/javascript" src="practice.js">/**/</script>
    </head>
    <body>
        <h1>JavaScript is fun!</h1>
        <p id="paragraph">This is a <span class="bold">paragraph</span>.</p>
        <button>Show/Hide</button>
        <p>This is <span class="bold green">another</span> paragraph.</p>
    </body>
</html>

This is the JavaScript we created.

window.onload = init

function init() {
    //alert("The page loaded!");
    
    var p = document.getElementById("paragraph")
    var boldItems = document.getElementsByClassName("bold");
    
    for (var i = 0; i < boldItems.length; i++) {
        boldItems[i].style.fontWeight="bold";
    }
    
    p.style.color = "blue";
    
    var buttons = document.getElementsByTagName("button");
    var button = buttons[0];
    button.onclick = show_hide;   
}

function show_hide() {
    var p = document.getElementById("paragraph");
    
    if (p.style.display == "none") {
        p.style.display = "block";
    } else {
        p.style.display = "none";
    }
    
}