DOM events javascript firefox compatibility

Hello, I don’t know if many of you use Firefox and I’ve ran in an issue that only changing to chrome solved,

with the following code I had the error :

ReferenceError: event is not defined

I don’t know how I can make my code work on firefox, here it is

// The keys and notes variables store the piano keys
const keys = [‘c-key’, ‘d-key’, ‘e-key’, ‘f-key’, ‘g-key’, ‘a-key’, ‘b-key’, ‘high-c-key’, ‘c-sharp-key’, ‘d-sharp-key’, ‘f-sharp-key’, ‘g-sharp-key’, ‘a-sharp-key’];
const notes = ;
keys.forEach(function(key){
notes.push(document.getElementById(key));
})

console.log(notes)
// Write named functions that change the color of the keys below
const keyPlay =function(event) {
event.target.style.backgroundColor = ‘#91f17e
}
const keyReturn= function() {
event.target.style.backgroundColor = ‘’
}

// Write a named function with event handler properties
let eventAssignment=function(note){
note.onmousedown = function() {
keyPlay(event)
}
note.onmouseup = function() {
keyReturn(event)
}
note.onmouseout = function() {
keyReturn(event)
}
}
console.log(event)

// Write a loop that runs the array elements through the function
notes.forEach(eventAssignment)

// These variables store the buttons that progress the user through the lyrics
let nextOne = document.getElementById(‘first-next-line’);
let nextTwo = document.getElementById(‘second-next-line’);
let nextThree = document.getElementById(‘third-next-line’);
let startOver = document.getElementById(‘fourth-next-line’);

// This variable stores the ‘-END’ lyric element
let lastLyric = document.getElementById(‘column-optional’);

// These statements are “hiding” all the progress buttons, but the first one
nextTwo.hidden = true;
nextThree.hidden = true;
startOver.hidden= true;

// Write anonymous event handler property and function for the first progress button
nextOne.onclick= function(){
nextTwo.style.display = ‘inline’
nextOne.hidden= ‘true’
}

// Write anonymous event handler property and function for the second progress button
nextTwo.onclick= function(){
nextThree.style.display = ‘inline-block’
nextTwo.hidden= ‘true’
document.getElementById(‘word-five’).innerHTML = ‘DEAR’
document.getElementById(‘word-six’).innerHTML = ‘FRI-’
lastLyric.style.display= ‘inline-block’

document.getElementById('letter-note-three').innerHTML = 'G'

document.getElementById('letter-note-four').innerHTML = 'E'

document.getElementById('letter-note-five').innerHTML = 'C'

document.getElementById('letter-note-six').innerHTML = 'B'

}

// Write anonymous event handler property and function for the third progress button
nextThree.onclick= function(){
startOver.style.display = ‘inline-block’
nextThree.hidden= ‘true’
document.getElementById(‘word-one’).innerHTML = ‘HAP-’
document.getElementById(‘word-two’).innerHTML = ‘PY’
document.getElementById(‘word-three’).innerHTML = ‘BIRTH-’
document.getElementById(‘word-four’).innerHTML = ‘DAY’
document.getElementById(‘word-five’).innerHTML = ‘TO’
document.getElementById(‘word-six’).innerHTML = ‘YOU!’
lastLyric.style.display= ‘none’
document.getElementById(‘letter-note-one’).innerHTML = ‘F’
document.getElementById(‘letter-note-two’).innerHTML = ‘F’
document.getElementById(‘letter-note-three’).innerHTML = ‘E’
document.getElementById(‘letter-note-four’).innerHTML = ‘C’
document.getElementById(‘letter-note-five’).innerHTML = ‘D’
document.getElementById(‘letter-note-six’).innerHTML = ‘C’

}

// This is the event handler property and function for the startOver button
startOver.onclick = function() {
nextOne.hidden = false;
startOver.hidden = true;
document.getElementById(‘word-one’).innerHTML = ‘HAP-’;
document.getElementById(‘letter-note-one’).innerHTML = ‘G’;
document.getElementById(‘word-two’).innerHTML = ‘PY’;
document.getElementById(‘letter-note-two’).innerHTML = ‘G’;
document.getElementById(‘word-three’).innerHTML = ‘BIRTH-’;
document.getElementById(‘letter-note-three’).innerHTML = ‘A’;
document.getElementById(‘word-four’).innerHTML = ‘DAY’;
document.getElementById(‘letter-note-four’).innerHTML = ‘G’;
document.getElementById(‘word-five’).innerHTML = ‘TO’;
document.getElementById(‘letter-note-five’).innerHTML = ‘C’;
document.getElementById(‘word-six’).innerHTML = ‘YOU!’;
document.getElementById(‘letter-note-six’).innerHTML = ‘B’;
}

These are likely the lines raising the error…

note.onmouseup = function() {
  keyReturn(event)
}
note.onmouseout = function() {
  keyReturn(event)
}

Just include the event parameter in both function()s.

Should the mouseup event trigger keyPlay()?

it doesn’t work,

even the solution provided for this exercise does not work on firefox
https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/dom-javascript-events/lessons/dom-events/exercises/dom-event-types

MIssed one…

const keyReturn = function() {
  event.target.style.backgroundColor = ‘’
}

Likely because the authors are all working on Macs using Chrome or Safari, or in Linux using Chrome. I rather doubt they do much testing with FF back there. I use FF almost exclusively and my version of this worked at the time I completed the assignment.

Give it another go, and if we still haven’t nailed this down, I’ll compare your code to mine.

sorry but this dosen’t work either,
I’ve tried switching up the parameters and I couldn’t get it to work

Can you please post a link to the exercise page? Thanks.

This works in FF…

let colorChange = function(event) {
  let randomColor = `rgb(${rgb(256)}, ${rgb(256)}, ${rgb(256)})`;
  event.target.style.backgroundColor = randomColor;
}

the piano project:
https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/dom-javascript-events/projects/piano-keys

the event exercise:
https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/dom-javascript-events/lessons/dom-events/exercises/dom-event-types

I wrote callback references on the listeners…

function keyPlay(event) {
  event.target.style.backgroundColor = 'green';
}
function keyReturn(event) {
  event.target.style.backgroundColor = '';
}
function assignKey(note) {
  note.onmousedown = keyPlay;
  note.onmouseup = keyReturn;
}

Notice also that keyPlay is on mousedown, and keyReturn is on mouseup.

Thanks alot !
I dont understand why this works and not the previous attempts but still thanks !

1 Like