HTML:

    <div id="num1" class="colored"><p id="num1-alert">:(</p></div>
    <div id="num2" class="colored"><p id="num2-changer">:(</p></div>
    <div id="num3" class="colored"><p id="num3-changer">Change color!</p></div>
    

CSS:

    body { font-family: Tahoma, Arial, sans-serif }  
    div.colored { width: 80px; height: 80px; margin: 30px auto 15px auto; padding: 20px 20px; border: 1px solid red; background: orange }
    div#num1, div#num2 { font-size: 3em }
    div p { cursor: pointer }    
    

JavaScript:

    window.onload = function() {
      document.getElementById('num1').style.backgroundColor = 'white';
      document.getElementById('num2').style.backgroundColor = '#ffffff';
      document.getElementById('num3').style.backgroundColor = 'white';
      document.getElementById('num1-alert').onclick = function() {
        alert(document.getElementById('num1').style.backgroundColor)
      }
      document.getElementById('num2-changer').onclick = function() {
        alert(document.getElementById('num2').style.backgroundColor);
        if(document.getElementById('num2').style.backgroundColor == '#ffffff') {
          setTimeout('document.getElementById("num2").style.backgroundColor = "red"', 500);
          setTimeout('alert("Color changed to: "+document.getElementById("num2").style.backgroundColor)', 1000)
        }
      }
      document.getElementById('num3-changer').onclick = function() {
        alert(document.getElementById('num3').style.backgroundColor);
        if(document.getElementById('num3').style.backgroundColor == 'white') {
          setTimeout('document.getElementById("num3").style.backgroundColor = "red"', 500);
          setTimeout('alert("Color changed to: "+document.getElementById("num3").style.backgroundColor)', 1000)
        }
      }
    }