How to change sytle properties of an element in JavaScript?-CodePudding

I am making a small online app that will require the user to input some options and the site will change it's background and similar features based on their input.
However, I have not been able to change any of the document style properties through JavaScript code.

Am I missing something?

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
}

In case it's needed here is also the HTML and CSS code 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" >
            <!-- <img src="Temp1.jpg" alt="Greeting card image"> -->
            <h1 id="Title" >
                Sample title text
            </h1>
            <h2 id="Name" >
                Sample name text
            </h2>
            <h3 id="Message" >
                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%;
}

CodePudding user response：

The problem is that the script runs before the DOM is fully constructed and the element that you want to style actually exists.

You need to move your <script> tag to the end of the <body> element:

 <body>
    <div id="background" >
      <!-- <img src="Temp1.jpg" alt="Greeting card image"> -->
      <h1 id="Title" >Sample title text</h1>
      <h2 id="Name" >Sample name text</h2>
      <h3 id="Message" >Sample message text</h3>
    </div>
    <script src="script.js"></script>
  </body>

CodePudding user response：

Just simply add '#' at the beginning of the colBg. use like this

<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>

make sure that your input always take a color value like #fff

CodePudding user response：

When you send a color code, you will add #. If the name of the color is sent, then all the names must be sent. As like this: color:#000 Or color:Black.