0

Esta es la estructura de mi pagina HTML pero no ejecuta los scripts, que puede ser? Disculpen si se ve desorganizado. Probé en otro HTML que tengo como pruebas y el script funciona normalmente, no se que pudo haber pasado en el HTML principal.

<!DOCTYPE html>
<html>
    <BODY LANG="en-US" BGCOLOR="#000000" DIR="LTR">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>Titulo de la pagina</title>
     <link rel="stylesheet" href="style.css">
    </head> 
<body>
  <div id="container">
    
    <header><h1 ALIGN=CENTER><FONT COLOR="#ff0000">Header</FONT></h1>
    
    </header>
    <center><a href="lab.html"><img src="inicio.jpg" onmouseover="this.src='inicio.jpg'" onmouseout="this.src='inicio.jpg"/></a></center>
<hr color="#0080FF">
 <FONT COLOR="#ff0000">¿Qué es?</FONT></font></h2>
    <p><font color = "#2E7429">texto1</font></p>
    <p><font color = "#2E7429">texto2</font></p> <h2><font color="FEFEFE"></font></h2>

        <h2><FONT COLOR="#ff0000">header2</font></h2>
        <p><font color = "#2E7429">texto3</font></p>
        <h2><FONT COLOR="#ff0000">header3</font></h2>
        <p><font color = "#2E7429">texto4</font></p> 
        <h2><FONT COLOR="##2E7429">header4)</font></h2> 
        <br><br>
         <font size="6"><FONT COLOR="#ff0000"><p><marquee>texto5</marquee></FONT>
    </div>         
</body>
</html>
<script src="screen.js"></script>

EDIT: Este es el Javascript:

var images = [
  'Space.gif',  'Windows.gif'
]
setInterval(function() {
  const image = images.shift()
  document.querySelector('body').style.backgroundImage = `url(${image})`
  images.push(image)
}, 3000);

EDIT 2: El Visual Studio Code me muestra el siguiente error: "Unterminated string literal." y viene de aquí:

<center><a href="lab.html"><img src="inicio.jpg" onmouseover="this.src='inicio.jpg'" onmouseout="this.src='inicio.jpg"/></a></center> 

Ese pedazo de codigo como se puede ver son los botones de la pagina. Será que esa es la causa que no corra el script asi no tenga nada que ver con los botones de la pagina? Como puedo corregir esto?

Saludos!

9
  • Checa si tu navegador tiene habilitado Javascript y si ese no es el problema, sería necesario que compartas tu archivo JS también el 10 oct. 2021 a las 23:45
  • Hola si, el navegador tiene JS habilitado, de hecho es el mismo que uso con mi HTML de pruebas, con ese HTML funciona perfectamente. Saludos! el 10 oct. 2021 a las 23:54
  • 1
    No sé si sea la causa pero, la estructura de tu HTML está extremadamente mal estructurado. Hay una etiqueta body abierto pero no cerrado: error. El atributo lang="" debe ir dentro de la etiqueta HTML. La etiqueta script debe ir dentro y al final de body. Algunas etiquetas se abren con mayúscula y cierra con minuscula: error. Arregla todo eso y luego quita el atributo onmouseover de tu etiqueta a, solo para probar el error el 11 oct. 2021 a las 0:30
  • Si es la imagen del boton que no te cambia es porque te falta la comilla de cierre ', tiene que quedarte asi onmouseout="this.src='inicio.jpg'"
    – AugustoM
    el 11 oct. 2021 a las 0:49
  • Solucionado! Lo que pasaba era que tenia programado que la imagen del fondo de la pagina cambiara cada cierto tiempo pero esto no pasaba en este html en especifico pero en otros si, y despues de tanto buscar era que habia puesto exactamente la misma imagen pero con diferente nombre en el script :/ Ahora si funciona de maravilla! PD: Yo también se que es horroroso leer mis HTML, uno de mis grandes problemas en la programacion es la identación :( de todas formas muchas gracias por sus observaciones! el 11 oct. 2021 a las 0:50

1 respuesta 1

0

Éste es una copia de tu código con lijero arreglo de apertura y cierre de etiqueta, corrección de mayúscula a minúscula, eliminación de etiqueta extra, y completado comillas. Eso era el error en tu HTML y js.

<!DOCTYPE html> 
<html lang="en-US"> 
 <head> 
  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <title>Titulo de la pagina</title> 
  <link rel="stylesheet" href="style.css"> 
 
 </head>
 <body BGCOLOR="#000000" DIR="LTR">
  
  <div id="container"> 
   
   <header>
    <h1 ALIGN=CENTER><font color="#ff0000">Header</font></h1> 
   </header> 
   
   <center>
    <a href="lab.html">
     <img src="inicio.jpg" onmouseover="this.src='inicio.jpg'" onmouseout="this.src='inicio.jpg'"/>  
    </a> 
   </center>
   
   <hr color="#0080FF"> 
   
   <h2><font color="#ff0000">¿Qué es?</font></h2> 
   
   <p><font color="#2E7429">texto1</font></p> 
   
   <p><font color="#2E7429">texto2</font></p> 
   
   <h2><font color="FEFEFE"></font></h2> 
   
   <h2><font color="#ff0000">header2</font></h2> 
   
   <p><font color="#2E7429">texto3</font></p> 
   
   <h2><font color="#ff0000">header3</font></h2> 
   
   <p><font color="#2E7429">texto4</font></p> 
   
   <h2><font color="#2E7429">header4)</font></h2> 
   
   <br><br> 
   
   <font size="6" color="#ff0000">  

    <p><marquee>texto5</marquee></p>  

   </font>  

   </div> 
  
   <script src="screen.js"></script> 
  
 </body> 

</html> 

Como se nota, realicé varias modificaciones importantes. Pero aún queda cosas que solucionar con respecto a la estetica: las declaraciones de estilos se pueden poner en la hojas de estilos style.css que tienes. Y tiene mucha etiqueta font que son innecesarios; ya con una clase para todos estaría perfecto. Pero lo dejé así.

1
  • 1
    Gracias, mil gracias :) el 12 oct. 2021 a las 18:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.