in the video im following created the html with the inline stylesheet. Now in js when i assign an element to a variable, js wont let me element.style it
in otherwords you wont see the style properties for any element you captured
exactly. I want to change the style of an element i captured, but the captured element dont show the property of style associated with it.
console.log(title)
let lits = document.getElementsByClassName(‘list-items’)
let title = document.querySelector(‘#main-heading’)
title.innerHTML = ‘Latest Movies’
title.st … (no style prop shows up)
We need to see your code. Not just a small and incomplete snippet of what you think we need to see. The best would be to put your project somewhere public and then provide a link to it.
console.log(title)
let lits = document.getElementsByClassName(‘list-items’)
let title = document.getElementById(‘main-heading’)
title.innerHTML = ‘Latest Movies’
title.style.color = ‘blue’
in html i use and used css style in there, but not pointing to a css doc. However, when i used getelembyid i was able to access the style attrib, but now it says… Cannot access ‘title’ before initialization. I will post below the html if it helps inlcuding the style…
Master Dom<style>
#main-heading = color: red;
}
.html {
width: 100%;
margin: 0;
}
body {
margin: 0;
background-color: rgb(30, 30, 85);
}
.container {
width: 40%;
margin: 5px auto 0;
background-color: rgb(3, 3, 45);
border-radius: 5%;
border: solid white 2px;
}
h1 {
color: white;
text-align: center;
padding-top: 25px;
margin: 0;
}
ul >li {
color: rgb(3, 3, 45);
background-color: white;
border: solid 1px rgb(3, 3, 45);
text-align: center;
list-style: none;
width: 80%;
padding: 15px;
margin-left: 9px;
}
.lists {
padding-bottom: 40px;
}
</style>
Favorite Movie Franchise
- The Matrix
- Star Wars
- Harry Potter
- Lord of the Rings
<script src="app2.js"></script>
not trying to be a pest, but doing js in node and vscode was no problem, but when i had to do js with html and console with changing elements, getting into somekinds of problems
sorry, the problem was the earlier console that was working before, but now that i moved the code, it was referring to title being used before initialization, so now it works.
let lits = document.getElementsByClassName(‘list-items’)
// let title = document.getElementById(‘main-heading’);
let title = document.querySelector(‘#main-heading’)
title.innerHTML = ‘Latest Movies’
title.style.color = ‘green’
the reason why this was confusing, was that i understood from different sites, ialways do research before comming here, that to use .style in js, you couldnt be using css, your html needed to only use inline styles.
but i noticed after that if you use css, you can still access the style of the elements captured, in javascript.