Untitled

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Assignment 3</title>
</head>
<h1>Assignment 3</h1>
<h3>Select Course</h3>
<select id = "text" size = "1">

<option value = "heading">Web Design 1</option>
<option value = "heading2">Web Design 2</option>
<option value = "heading3">Digital Art & Design</option>
<option value = "heading4">Photography</option>

</select>
<h1 id = "heading">Initial heading</h1>
<p id = "content">Initial Content</p>
<script src = "changeProgramInfo.js"></script>
<body>
</body>
</html>

document.getElementById('text').onchange = function() {
var text =
    document.getElementById('text').selectedIndex;
document.body.style.backgroundText =
document.getElementById('text').options[text].value
}

var pageContent = new Array();

pageContent[0] = {heading: "HEADING 1" ,
                  content: "CONTENT 1"};
pageContent[1] = {heading: "HEADING 2" ,
                  content: "CONTENT 2"};
pageContent[2] = {heading: "HEADING 3" ,
                  content: "CONTENT 3"};
pageContent[3] = {heading: "HEADING 4" ,
                  content: "CONTENT 4"};

var index = 0;
document.getElementById('text').onclick =function () {

document.getElementById('heading').textContent;
    pageContent[index].heading;
document.getElementById('content').textContent =
    pageContent[index].content;

index++;
index = index % pageContent.length;
}