I have a problem: Hover effect is not working after calling a function that changes the inner text of target elements. Basically, after loading the page it's working, but once I click a 'start' button which calls a function to change the content of the divs, hover effect is no longer working. Here is the code:
<div class="options">
<div class="option" id="opt1"><div>A: one</div></div>
<div class="option" id="opt2"><div>B: two</div></div>
<div class="option" id="opt3"><div>C: three</div></div>
<div class="option" id="opt4"><div>D: four</div></div>
</div>
<button class="button" onclick="loadQuestions()">Start</button>
.option {
border: 2px solid blue;
}
.option :hover {
box-shadow: 0 0 0 3px burlywood;
cursor: pointer;
}
const question = document.getElementById('question');
const opt1 = document.getElementById('opt1');
const opt2 = document.getElementById('opt2');
const opt3 = document.getElementById('opt3');
const opt4 = document.getElementById('opt4');
function loadQuestions() {
question.innerText = 'How old are you?';
opt1.innerText = 'A: 55';
opt2.innerText = 'B: 52';
opt3.innerText = 'C: 82';
opt4.innerText = 'D: 12';
}
You don't have a tag with id question so its throwing an error. Checkout following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.option {
border: 2px solid blue;
}
.option:hover {
box-shadow: 0 0 0 3px burlywood;
cursor: pointer;
}
</style>
</head>
<body>
<div class="options">
<span id="question" class="question"></span>
<div class="option" id="opt1"><div>A: one</div></div>
<div class="option" id="opt2"><div>B: two</div></div>
<div class="option" id="opt3"><div>C: three</div></div>
<div class="option" id="opt4"><div>D: four</div></div>
</div>
<button class="button" onclick="javascript:loadQuestions()">Start</button>
<script type="text/javascript">
const question = document.getElementById("question");
const opt1 = document.getElementById("opt1");
const opt2 = document.getElementById("opt2");
const opt3 = document.getElementById("opt3");
const opt4 = document.getElementById("opt4");
const loadQuestions = () => {
question.innerText = "How old are you?";
opt1.innerText = "A: 55";
opt2.innerText = "B: 52";
opt3.innerText = "C: 82";
opt4.innerText = "D: 12";
};
</script>
<script src="./index.js" type="text/javascript"></script>
</body>
</html>
You have to specify a tag with question id.