Grad Project 2: Event Handling

by Keeley Peck

HTML

<h2>Event Handling</h2>
<p>
  There are 3 event listeners in this form. You can see that each of them are written using the traditional event handling method. Your job is to rewrite lines 6-8, 16-18, and 26-28 to handle the events using the DOM level 3 event handling method instead of the traditional method.
</p>

<form class="myForm">
  <p>
    <label>Name
      <input type="text" name="name">
    </label>
  </p>

  <fieldset id="iceCream">
    <legend>Hover over me!</legend>
    <div id="choice">
      <p>Do you like Ice Cream?</p>
      <p>
        <label>
          <input type="radio" name="iceCream" value="yes"> Yes </label>
      </p>
      <p>
        <label>
          <input type="radio" name="iceCream" value="no"> No </label>
      </p>
    </div>
  </fieldset>

  <p>
    <label>More Info
      <textarea name="comments" maxlength="500"></textarea>
    </label>
  </p>

  <button id="submit" type="button">Submit</button>
  <span id="message">Form submitted!</span>
</form>

CSS

.myForm {
  width: 20em;
  padding: 1em;
  border: 1px solid #ccc;
}

.myForm * {
  box-sizing: border-box;
}

.myForm legend,
.myForm label {
  font-weight: bold;
}

#choice {
  display: none;
}

.myForm input[type="text"],
.myForm select,
.myForm textarea {
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  font-size: 0.9em;
  padding: 0.3em;
}

.myForm textarea {
  height: 100px;
}

#message {
  display: none;
}

JavaScript

var iceCream = document.getElementById("iceCream");
var radios = document.getElementById("choice");
var submit = document.getElementById("submit");

// Event #1
iceCream.onmouseover = function() {
  mouseOverFunction()
};

function mouseOverFunction() {
  radios.style.display = "inline";
  console.log("Hover options appear!");
}

// Event #2
iceCream.onmouseout = function() {
  mouseOutFunction()
};

function mouseOutFunction() {
  radios.style.display = "none";
  console.log("Hover options disappear!");
}

// Event #3
submit.onclick = function() {
  submitFunction()
};

function submitFunction() {
  document.getElementById("message").style.display = "inline";
  console.log("Form submitted!");
}