Estoy creando una pequeña aplicación en línea que requerirá que el usuario ingrese algunas opciones y el sitio cambiará su fondo y características similares según su entrada.
Sin embargo, no he podido cambiar ninguna de las propiedades de estilo del documento a través del código JavaScript.
¿Me estoy perdiendo de algo?
let bgType = prompt("Which type of background do you want? Color or image: "); if (bgType == "color" || bgType == "Color") { let colBg = prompt("Enter the color you want"); document.getElementById("background").style.backgroundColor = colBg; // I've tried putting default colors here for testing, but those didn't work either } else if (bgType == "image" || bgType == "Image") { let imgBg = prompt("Enter the number of the image you want (1-3): "); document.getElementById("background").style.backgroundColor = ""; // Unfinished }En caso de que sea necesario, aquí también está el código HTML y CSS HTML:
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Greeting card generator</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' type='text/css' media='screen' href='gfx.css'> </head> <body> <script src='script.js'></script> <div id="background" class="content"> <!-- <img src="Temp1.jpg" alt="Greeting card image"> --> <h1 id="Title" class="text"> Sample title text </h1> <h2 id="Name" class="text"> Sample name text </h2> <h3 id="Message" class="text"> Sample message text </h3> </div> </body> </html>CSS:
html, body { height: 100%; margin: 0; } #background { width: 100%; min-height: 100%; background-image: url(); background-color: white; background-size: cover; background-position: center; background-repeat: no-repeat; } .text { font-family: verdana; text-align: center; } #Title { padding-top: 20%; }Simplemente agregue ' # ' al comienzo de colBg . usar así
<script> let bgType = prompt("Which type of background do you want? Color or image: "); if (bgType == "color" || bgType == "Color") { let colBg = prompt("Enter the color you want"); document.getElementById("background").style.backgroundColor = `#${colBg}`; // I've tried putting default colors here for testing, but those didn't work either } else if (bgType == "image" || bgType == "Image") { let imgBg = prompt("Enter the number of the image you want (1-3): "); document.getElementById("background").style.backgroundColor = ""; // Unfinished } </script>asegúrese de que su entrada siempre tome un valor de color como #fff
El problema es que la secuencia de comandos se ejecuta antes de que el DOM esté completamente construido y el elemento que desea diseñar realmente exista.
Debe mover su etiqueta <script> al final del elemento <body> :
<body> <div id="background" class="content"> <!-- <img src="Temp1.jpg" alt="Greeting card image"> --> <h1 id="Title" class="text">Sample title text</h1> <h2 id="Name" class="text">Sample name text</h2> <h3 id="Message" class="text">Sample message text</h3> </div> <script src="script.js"></script> </body>Cuando envíe un código de color, agregará # . Si se envía el nombre del color, entonces se deben enviar todos los nombres. Así: color:#000 O color:Black .