Im sure there is some underlying logic here i do not understand but cannot find a solution online. Sometimes the styles are applied, sometimes they are not despite no changes being made. When i comment out a style for one ID, another ID starts working yet they are completely independent of each other, and switching ones position in the Javascript document flow makes anothers work? Only afew days into Javascript and this is very very strange to me. I am using live server on VS code.
const result = document.querySelector("#myElement");
result.style.color = "blue";
result.style.backgroundColor = "black";
result.style.fontSize = "80px";
let button = document.getElementById("button");
button.style.color = "red";
let para = document.getElementById("p");
para.style.backgroundColor = "black";
para.style.color = "green";
here is HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" type="text/css" />
<title>Document</title>
</head>
<body>
<h1 id="myElement">this is a heading</h1>
<p id="p">this is a pragraph, thanks</p>
<div class="container">
<div class="items-1 item">item 1</div>
<div class="items-2 item">item 2</div>
<div class="items-3 item">item 3</div>
<div class="items-4 item">item 4</div>
<div class="items-5 item">item 5</div>
</div>
<button id="btn">click me</button>
<script src="index.js"></script>
</body>
</html>
You need to call elements by their ID, tags by their TagName, etc. see below comments and corrected code.
const result = document.getElementById("#myElement"); // you get an element by it's ID //
result.style.color = "blue";
result.style.backgroundColor = "black";
result.style.fontSize = "80px";
let button = document.getElementByTagName("button"); // you get a tag by it's TagName //
button.style.color = "red";
let para = document.getElementByTagName("p"); // you get a tag by it's TagName //
para.style.backgroundColor = "black";
para.style.color = "green";
First, you should know that one ID should be occupied only by one HTML element. It's unique, otherwise it would be messed when you do the getElementById. If you want to refer to a specific element, you can use querySelector for single element and querySelectorAll for multiple element by using the respective selectors:
# for referring an element by Id.. for referring an element by Class.For example:
// Set all divs to have 300x150 and the border
document.querySelectorAll('div').forEach(e => {
e.style.width = '300px';
e.style.height = '150px';
e.style.border = '1px solid #000';
});
// Set style specifically for one element
document.querySelector('#div_1').style.background = '#e8e8e8';
// Making all elements with class elem to have font family: serif
document.querySelectorAll('.elem').forEach(e => {
e.style.fontFamily = 'serif';
});<p class="elem">Lorem Ipsum</p>
<div class="elem" id="div_1">This is div 1</div>
<div class="elem" id="div_2">This is div 2</div>P.S. Just pay attention that the querySelectorAll shouldn't be used for referring multiple elements.