Given cheerleader.html, write the
JavaScript code cheerleader.js
to display a large character when the user moves the mouse over one of the letters at the bottom.
(sample solution)
span
s in the letterinput
area.span
with class cheer
into the cheeroutput
area. Each character should be in upper case, followed by an exclamation point and a space.onmouseover
), rather than clicking it (onclick
).
window.onload = function() { var letters = document.querySelectorAll("#letterinput span"); for (var i = 0; i < letters.length; i++) { letters[i].onmouseover = letterMouseOver; } }; function letterMouseOver() { var span = document.createElement("span"); span.className = "cheer"; span.innerHTML = this.innerHTML.toUpperCase() + "! "; document.getElementById("cheeroutput").appendChild(span); setTimeout(removeCheer, 2000); } function removeCheer() { var letters = document.querySelectorAll("#cheeroutput span.cheer"); if (letters.length > 0) { letters[0].parentNode.removeChild(letters[0]); } }
document.onkeydown
)event.charCode
)String.fromCharCode
)window.onload = function() { ... document.onkeypress = documentKeyPress; }; function letterMouseOver() { makeCheer(this.innerHTML); } function documentKeyPress(event) { makeCheer(String.fromCharCode(event.charCode)); } function makeCheer(letter) { var span = document.createElement("span"); span.className = "cheer"; span.innerHTML = letter.toUpperCase() + "! "; document.getElementById("cheeroutput").appendChild(span); setTimeout(removeCheer, 2000); }