Simple DOM editing

This shows simple DOM editing, in which the display style property is changed based on user input.

HTML

<!-- Press a button to toggle between a red and green square -->
<div id="red"   class="square"></div>
<div id="green" class="square"></div>

<button onclick="showRed()"> Red </button>
<button onclick="showGreen()"> Green </button>

CSS

.square {
   width: 100px;
   height: 100px;
}

#red {
  background-color: red;
  display: none;
}

#green {
  background-color: green;
  display: block;
}

JavaScript

function showRed() {
   document.getElementById("green").style.display = "none";
   document.getElementById("red").style.display = "block";
}

function showGreen() {
   document.getElementById("red").style.display = "none";
   document.getElementById("green").style.display = "block";
}