Editing the DOM (solution)

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

by Brian von Konsky

HTML

<h2> This Page is About Animals </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 getURL(id) {
    var url="undefined";
    for (var i=0 ; i<JSONdata.animals.length ; i++) {
    	if (JSONdata.animals[i].pet == id) {
      	url = JSONdata.animals[i].url;
      }
    }
    return url;
}

function loadContent(idName) {
   url = getURL(idName);
   if (url != "undefined") {
      var HTML = "<img src='" + url + "'/>";
      document.getElementById("content").innerHTML = HTML;
   }
}
   
function setBackground (colour) {
     document.getElementById("content").style.backgroundColor = colour;
}
  
  /* 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
  */