Editing the DOM (Template)

This fiddle edits the DOM to change the DIV element with the id of content and sets the backgroundColor style attribute.

HTML

<!-- Business Web Technologies ISYS3004 -->
<!-- School of Information Systems      -->
<!-- Curtin University                  -->

<h2> Book Discounters </h2>

<div id="content">
Here is where the content goes
</div>

<button id="fishButton" onclick="loadContent('fish')">Fish</button>
<button id="dogButton"  onclick="loadContent('dog')">Dog</button>
<button id="catButton"  onclick="loadContent('cat')">Cat</button>

<button id="redButton" onclick="setBackground('red')">Red</button>
<button id="greenButton" onclick="setBackground('green')">Green</button>
<button id="blueButton" onclick="setBackground('blue')">Blue</button>

CSS

img {
  width: 100px;
}
#content {
  width: 200px;
  height: 200px;
}

JavaScript

var JSONdata = {animals: [
      {pet: "fish", url:"https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Goldfish3.jpg/560px-Goldfish3.jpg"},
      {pet: "dog", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Poligraf_Poligrafovich.JPG/483px-Poligraf_Poligrafovich.JPG"},
      {pet: "cat", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Kittyply_edit1.jpg/320px-Kittyply_edit1.jpg"},
]};
   
function setBackground (colour) {

   // Activity 1, Task 1
   // Set the content backbground color of the content area.
   // Do NOT set the foreground color of text in the content, 
   // or the background color of the body
   // Hint: http://www.w3schools.com/jsref/prop_style_backgroundcolor.asp 
    
}

function getURL(id) {
    var url="undefined";
    
    // Activity 1, Task 2
    // Add code here to loop through JSONdata until you find an animal object in which
    // the pet attribute matches id. 
    // If there is no animal with a pet attribute that matches id, return "undefined".
    
    return url;
}

function loadContent(idName) {
   url = getURL(idName);
   // Activity 1, Task 3
   // if the url returned is not "undefined", format a string so for an HTML img tag
   // with the src attribute set to the returned url. 
   // For information on img see http://www.w3schools.com/tags/tag_img.asp
   // Set the innerHTML propertiy of the element with the unique id of "content".
   // Hint: document.getElemetnId(id).innerHTML = XYZ;
 
}

  
  /* Licenses for these images at:
  https://commons.wikimedia.org/wiki/File:Goldfish3.jpg
  https://commons.wikimedia.org/wiki/File:Poligraf_Poligrafovich.JPG
  https://commons.wikimedia.org/wiki/File:Kittyply_edit1.jpg
  */