I have an html page called ‘Projects’ that contains some div elements, one of which is a ball shape that I’m trying to change the background colour of. In my linked JS doc I’m using the getElementById selector but it doesn’t seem to make the colour change. I’ve also tried using .querySelector() using the class name but that doesn’t seem to work either.
The styling in the CSS file using the #id works fine.
Why won’t this JS code change the styling?
My javascript file is linked at the bottom of the HTML page.
Here’s my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects</title>
<link rel="stylesheet" href="./css.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Tektur:[email protected]&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Tektur:[email protected]&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Akronim&family=Alumni+Sans+Pinstripe:ital@0;1&family=Anybody:ital,wght@0,100..900;1,100..900&family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Ballet:[email protected]&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Bungee+Outline&family=Bungee+Shade&family=Chela+One&family=Codystar:wght@300;400&family=Creepster&family=DM+Serif+Text:ital@0;1&family=Darker+Grotesque:[email protected]&family=Didact+Gothic&family=Farsan&family=Festive&family=Frijole&family=Jacquard+24+Charted&family=Jura:[email protected]&family=Kaushan+Script&family=Kenia&family=Libre+Caslon+Display&family=Lobster&family=Londrina+Shadow&family=Mea+Culpa&family=Merienda:[email protected]&family=Monofett&family=Orbitron:[email protected]&family=Oswald:[email protected]&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Public+Sans:ital,wght@0,100..900;1,100..900&family=Raleway+Dots&family=Rubik+Bubbles&family=Rubik+Gemstones&family=Rubik+Glitch&family=Rubik+Glitch+Pop&family=Rubik+Puddles&family=Rubik+Vinyl&family=Rubik+Wet+Paint&family=Syne+Mono&family=Teko:[email protected]&family=Tektur:[email protected]&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Trade+Winds&family=UnifrakturMaguntia&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/3e460d3532.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar" id="myTopnav">
<a href="./Home.html" >Developer | Steven Llewellyn</a>
<a href="./Contact.html">Contact</a>
<a href="./Skills.html">Skills</a>
<a href="./Projects.html" class="active">Projects</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa-solid fa-bars"></I>
</a>
</nav>
</header>
<main class="ProjMain">
<section class="projcontainer">
<h2>Project 2 - Ball Game</h2>
<button>Click to reveal the game</button>
<p>Win the game by making the ball jump over the obstacles right to the end.</p>
<div class="ball-game">
<div class="float-ball" id="ball"></div>
<div id="stump1"></div>
<div id="stump2"></div>
<div id="stump3"></div>
</div>
</section>
<!--
<section class="projcontainer">
<h2>Project 3 - Logo Maker</h2>
<p>This is a desciption of the project</p>
<div>[Project box]</div>
</section>
-->
</main>
<footer>
<address>
<h2>London, UK</h2>
</address>
</footer>
<!-- This code links the Javascript file to the page. -->
<script src="./Scripts/JS_logoMaker.js" ></script>
</body>
</html>
CSS:
.ball-game {
margin: auto;
width: 80%;
height: 400px;
padding-bottom: 30px;
background-color: coral;
position: relative;
}
#ball {
height: 100px;
width: 100px;
background-color: #35bfa8;
border-radius: 50%;
border: solid black 1px;
font-size: 2rem;
position: absolute;
bottom: 0px;
left: 10px;
transition-property: bottom;
transition-duration: 2s;
}
#stump1 {
height: 150px;
width: 50px;
background-color: #008CBA;
border: black solid 2px;
position: absolute;
bottom: 0;
left: 180px;
}
#stump2 {
height: 200px;
width: 50px;
background-color: #008CBA;
border: black solid 2px;
position: absolute;
bottom: 0;
left: 480px;
}
#stump3 {
height: 270px;
width: 50px;
background-color: #008CBA;
border: black solid 2px;
position: absolute;
bottom: 0;
left: 800px;
}
JS:
document.getElementById('ball').style.backgroundColor = 'red';
//This one below doesn't seem to work either.
// document.querySelector('.float-ball').style.backgroundColor = 'red';
