0

My code for class keeps giving me

   SCRIPT.JS:24 Uncaught TypeError: Cannot set properties of null (setting 'className')
at SCRIPT.JS:24:47

Here is my Java Script so far


//Seting some variables to make coding easier
let userGreet = document.querySelector("#userGreet");
let userData = document.querySelector("#userData");

let userName = prompt("What is your name?");

alert("Hello "+userName+", Lets Calculate your purchase");

//Here we prompt the user for the price of there 2 items
let item1 = parseFloat(prompt("How Much it your first Item?"));
let item2 = parseFloat(prompt("How much is your second item?"));

//Now we add those items together to get the total
let total = item1 + item2;


//Now we will use if & elseif statements to see if the user gets a discount on their purchase 
if (_total => 100){
    let afterDiscount = total * .10;
    document.querySelector("body").className =  "discount";
    userGreet.innerHTML = "Hello " + userName + ", Here is your Total.";
    userData.innerHTML = "Your purchase total is $" + afterDiscount + ", which includes your 10% discount.";

} else if (_total => 50){
    let afterDiscount = total * .05;
    document.querySelector("body").className =  "discount";
    userGreet.innerHTML = "Hello " + userName + ", Here is your Total.";
    userData.innerHTML = "Your purchase total is $" + afterDiscount + ", which includes your 5% discount.";

} else if (total < 50){
    
    document.querySelector("body").className =  "nonDiscount";
    userGreet.innerHTML = "Hello " + userName + ", Here is your Total.";
    userData.innerHTML = "Your purchase total is $" + total;
}

Here is my HTML so far

<!DOCTYPE html>
<html>
<head>
    <title>CE05 QuertSelector</title>
    <script src="JS/SCRIPT.JS"></script>
</head>
<body class="body">
<link rel="stylesheet" href="CSS/STYLE.CSS"> 

<h1 id="topOf">QuerySelector</h1>
<h3 id="userGreet">Hello User</h3>
<p id="userData">let play with QuerySelector</p>

</body>
</html>

and finaly here is my CSS

body {
    background-color: rgb(255, 255, 255);
  }
  
h1 {
    color: rgb(1, 1, 1);

  }
  
h3{
    Color: rgb(0, 0, 0);
  }
  
p {
    font-family: verdana;
    font-size: 20px;
  }

.discount{
  background-color: rgb(25, 225, 25) ;
}

.nonDiscount{
  background-color: rgb(216, 239, 12);
}

I feel like I'm missing something obvious, help with this would be apreciated.

The code should change the background collor depending on the total cost of the 2 items, then change the h3 and p1 text to tell the user their total.

Grimreaper1214
  • 1

1 Answers1

2

Your script tag is running before the elements are created. You can fix this by moving it to the end of the body.

<!DOCTYPE html>
<html>
<head>
    <title>CE05 QuertSelector</title>
</head>
<body class="body">
<link rel="stylesheet" href="CSS/STYLE.CSS"> 

<h1 id="topOf">QuerySelector</h1>
<h3 id="userGreet">Hello User</h3>
<p id="userData">let play with QuerySelector</p>

<script src="JS/SCRIPT.JS"></script>
</body>
</html>
asportnoy
  • 2,218
  • 2
  • 17
  • 31