Tengo un problema: el efecto de desplazamiento no funciona después de llamar a una función que cambia el texto interno de los elementos de destino. Básicamente, después de cargar la página, funciona, pero una vez que hago clic en el botón "Inicio" que llama a una función para cambiar el contenido de los divs, el efecto de desplazamiento ya no funciona. Aquí está el código:
<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'; }No tiene una etiqueta con question de identificación, por lo que arroja un error. Revisa el siguiente código:
<!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> Tienes que especificar una etiqueta con la identificación de la question .