I've been working on creating some code that displays elements when a button is clicked. While I can make them appear, I'm having trouble getting each button to show its own set of elements separately (i.e., hiding other elements when a different button is clicked). Where should I focus my efforts to fix this issue?
function showElements(element1, element2) {
'use strict';
document.getElementById(element1).className = element1;
document.getElementById(element2).className = element2;
}
function init() {
'use strict';
document.getElementById("btn1").addEventListener("click", function() {
showElements("red1", "blue1");
});
document.getElementById('btn2').addEventListener('click', function() {
showElements("red2", "blue2");
});
document.getElementById('btn3').addEventListener('click', function() {
showElements("red3", "blue3");
});
document.getElementById('btn4').addEventListener('click', function() {
showElements("red4", "blue4");
});
document.getElementById('btn5').addEventListener('click', function() {
showElements("red5", "blue5");
});
document.getElementById('btn6').addEventListener('click', function() {
showElements("green6", "red6", "blue6");
});
}
window.onload = init;.hidden{
display: none;
}
/* CSS styling for the various color boxes */
<!DOCTYPE html>
<html lang="en">
<!-- HTML structure for displaying the buttons and elements -->
</html>