• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

144
Vistas
El efecto de desplazamiento no funciona después de llamar a una función que cambia el texto interno de los elementos de destino

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'; }
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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 .

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda