@Mod8124
Posted
Hello, well done!
You can reduce the code of your function by passing parameters and always put all your const & let on the top of the file in that way the variable it's the global scope and not the local scope(only available in the function or {}) also it's easy if you select all your buttons with querySelectorAll
//select all the buttons
const buttons = document.querySelectorAll('.circleNbr');
const outputNote = document.querySelector('#outputNote');
//then create a function, first, it's going to put all the buttons by default(background & color), and then it's going to change the background & color of what button that user clicked and change the outputNote value
function noteSelected(event) {
buttons.forEach(button => {
button.style.backgroundColor = "#292D38";
button.style.color = "hsl(217, 12%, 63%)";
});
event.target.style.backgroundColor = "hsl(217, 12%, 63%)";
event.target.style.color = "#fff";
outputNote.innerHTML = event.target.innerHTML;
btnInHover.classList.add("btnInHover");
}
//then assing your function `noteSelected` for every button by method forEach
buttons.forEach(button => button.addEventListener('click', noteSelected);
//now every button has an click event
and that's all :)
the function submit is ok, also it's bad practice to call functions in your html, try to always assign event or call directly in your script tag
bad
<button onClick="noteSelected()"></button>
good
const button = document.querySelector('button');
button.addEventListener('click', noteSelected);
Marked as helpful
@MrFougasse
Posted
@Mod8124 Thank you so much, your help blowed my mind!