Practice Set, Week 9, Traditional vs DOM Level 3 Events

by Jordan Marechal

HTML

<h3>Practice Set, Week 9, Traditional vs. DOM Level 3 Events</h3>

<p>This page contains a button, and code written using the traditional method of attaching events to DOM elements.  We'd like to be sure that you're comfortable with the syntax for attaching events, especially the DOM Level 3 method (e.g. using <code>addEventListener()</code>).  </p>
<p>Your task is to rewrite the event handler so that it uses the DOM Level 3 method of attaching events (e.g. using <code>addEventListener()</code> rather than the <code>ondblclick</code> property)</p>
<p>The functionality should remain identical. Double-clicking the button will alternate its text color between red and blue. </p>
<input type="button" value="Double-Click Me!" id="theButton">

CSS

.button {
    text-indent:0;
    border:1px solid #eda933;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    line-height:65px;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#f6b33d;
}

JavaScript

/*var btn = document.getElementById("theButton");
btn.ondblclick = function(evt){
    if (evt.target.style.color != 'red'){
        evt.target.style.color = 'red';
    }else{
        evt.target.style.color = 'blue';
    }
}*/

window.onload = function(evt){

var btn = document.getElementById("theButton");

document.addEventListener("dblclick", function(evt){

   // document.getElementById("theButton").innerHTML = element;
    
    if (evt.target.style.color != 'red'){
        evt.target.style.color = 'red';
    }else{
        evt.target.style.color = 'blue';
   }
}); 
}