Quiz project

As a final touch to my customized project, I thought it would be nice that every time a user hovers over a label element that it would get the class ‘greyHover’ turning the background to a dark shade of grey. So I started putting in the java script and I got ‘Uncaught TypeError:’. Any help would be appreciated.

source of code problem

let inputHover = document.querySelectorAll('input');

let labelHover = document.querySelectorAll('label');

labelHover.addEventListener('mouseover', (e) => {
 if (e.target.tagName == 'INPUT')
 {labelHover.className = 'greyHover'}
})

html

<!DOCTYPE html>


<html>

<head>
<title>quiz</title>
<link href="./style.css" type="text/css" rel="stylesheet">
</head>

<body>

<h1 class='headline'>QUIZ</h1>

<form class="quiz" action="index.html" method="post">


<h4>1. How many states are in the U.S.?</h4>
<input type="radio" name="q1" value="b">
<label id='q1b'>48</label><br>
<input type="radio" name="q1" value="a">
<label id='q1a'>50</label><br>


<h4>2. How many wheels are in a car?</h4>
<input type="radio" name="q2" value="a">
<label id='q2a'>4</label><br>

<input type="radio" name="q2" value="b">
<label id='q2b'>5</label><br>


<h4>3. What is the capital of the U.S.?</h4>
<input type="radio" name="q3" value="a">
<label id='q3a'>Washington</label><br>

<input type="radio" name="q3" value="b">
<label id='q3b'>New York</label><br>



<h4>4. how many hours in a day?</h4>
<input type="radio" name="q4" value="b">
<label id='q4b'>12</label><br>

<input type="radio" name="q4" value="a">
<label id='q4a'>24</label><br>


<h4>5. what does HTML stand for?</h4>
<input type="radio" name="q5" value="a">
<label id='q5a'>Hyperlink Text Markup Language</label><br>

<input type="radio" name="q5" value="b">
<label id='q5b'>Hyper Test Marker Language</label><br>


<h4>6. How many paws does a dog have?</h4>
<input type="radio" name="q6" value="a">
<label id='q6a'>4</label><br>

<input type="radio" name="q6" value="b" >
<label id='q6b'>3</label><br>


</form>


<button id='myButton'>submit test</button>

<div id='myModal'>
  <div id='modalContent'>
    <span class='close'>&times</span>
    <p id='message'></p>
  </div>

</div>

</body>
<script src="checkAnswers.js"></script>
</html>

css

/*element styles*/
body {
background-color: rgb(255, 243, 230);
}






/*class styles*/
.headline {
  text-align: center;
  letter-spacing: 5px;
  border: 4px dashed rgb(51, 102, 0);
  border-radius: 5px;
}

.greyHover{
  background-color: rgba(142, 142, 142, 0.4);
}


/*id styles*/




/*modal styles*/
#myModal {
  width: 30%;
  height: 30%;
  border: 2px solid blue;
  display: none;
  position: fixed;
  right: 30%;
  top: 30%;
  z-index: 1;
  background-color: white;
}

#message {
  text-align: center;
  font-size: 30px;
  color: rgb(55, 174, 114);
}

.close {
  font-size: 30px;
}


/*styles the answers green if right and red if wrong*/
.right {

  padding: 2px;
  border: 2px solid green;
  border-radius: 10px;
}

.wrong {

  padding: 2px;
  border: 2px solid red;
  border-radius: 10px;
}

JavaScript

let modalButton = document.getElementById('myButton');

var correctAnswers;



//var submitTest = document.querySelector('input.submit');

modalButton.addEventListener("click", (e) => {
    correctAnswers = 0;

let modal = document.getElementById('myModal');

let closeModal = document.getElementsByClassName('close')[0];

//if they click the button the modul will pop up
if (e.target.tagName == 'BUTTON') {modal.style.display = 'block';}

//closes modal when they click on the span element
closeModal.onclick = function() {
  modal.style.display = "none";
}


//selecting each question with their name attribute. also selecting the answers by their id
    var q1 = document.querySelector('input[name="q1"]:checked');
    var q1a = document.getElementById('q1a');
    var q1b = document.getElementById('q1b');

    var q2 = document.querySelector('input[name="q2"]:checked');
    var q2a = document.getElementById('q2a');
    var q2b = document.getElementById('q2b');

    var q3 = document.querySelector('input[name="q3"]:checked');
    var q3a = document.getElementById('q3a');
    var q3b = document.getElementById('q3b');

    var q4 = document.querySelector('input[name="q4"]:checked');
    var q4a = document.getElementById('q4a');
    var q4b = document.getElementById('q4b');

    var q5 = document.querySelector('input[name="q5"]:checked');
    var q5a = document.getElementById('q5a');
    var q5b = document.getElementById('q5b');

    var q6 = document.querySelector('input[name="q6"]:checked');
    var q6a = document.getElementById('q6a');
    var q6b = document.getElementById('q6b');






/*if the value of the question is 'a' then 1 will be added to correct answers and they will have a green border.

*/
    if (q1 && q1.value == "a") {correctAnswers ++; q1a.className = 'right';}

    if (q1 && q1.value == "b") {q1b.className = 'wrong'}


    if (q2 && q2.value == "a") {correctAnswers ++; q2a.className = 'right'}

    if (q2 && q2.value == "b") {q2b.className = 'wrong'}


    if (q3 && q3.value == "a") {correctAnswers ++; q3a.className = 'right';}

    if (q3 && q3.value == "b") {q3b.className = 'wrong'}


    if (q4 && q4.value == "a") {correctAnswers ++; q4a.className = 'right';}

    if (q4 && q4.value == "b") {q4b.className = 'wrong'}


    if (q5 && q5.value == "a") {correctAnswers ++; q5a.className = 'right';}

    if (q5 && q5.value == "b") {q5b.className = 'wrong'}


    if (q6 && q6.value == "a") {correctAnswers ++; q6a.className = 'right';}

    if (q6 && q6.value == "b") {q6b.className = 'wrong'}

//selects the paragraph element in the modal
var message = document.getElementById('message');

//takes the selected element and prints out the number of correct answers on the screen
message.textContent = `You got ${correctAnswers} question(s) out of 6 correct`;
});





let inputHover = document.querySelectorAll('input');

let labelHover = document.querySelectorAll('label');

labelHover.addEventListener('mouseover', (e) => {
 if (e.target.tagName == 'INPUT')
 {labelHover.className = 'greyHover'}
})


//lets me know if the javascript is linked correctly
alert('Javascript is linked correctly');








/*objectives for next time.
1.turn alert into a modul
2.when the value is 'a' or 'b', make the border red or green based on if they got the answer correct or incorrect
3. add an event listener that will make the backround color dark grey when they hover over the the input answer. do this by selecting the <form> element and targeting the input element.

*/

As much as I admire your effort, why not just add a hover attribute to your CSS?

label:hover {
     background-color: rgba(142, 142, 142, 0.4);
}

As for debugging your proposed code. You will have to make your label pointer more specific by calling a for (label of labelHover) {} Also your if statements is not setup correctly I guess, since it does not give the proper result. And with your code, once an element is hovered over the class will remain, even upon leaving the element.

If you do insist on using Javascript for your hover action why not add a class on ‘mouseover’ instead and remove it upon ‘mouseleave’ like so:

for (label of labelHover) {
  label.addEventListener('mouseover', (e) => {
    e.target.classList.add("greyHover")
  });

  label.addEventListener('mouseleave', (e) => {
    e.target.classList.remove("greyHover")
  });
}
1 Like

This topic was automatically closed 18 hours after the last reply. New replies are no longer allowed.