Recurring: Cant style object in JS, Vscode

JavaScript
1 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Master Dom Manipulation</title>
        
        <link rel="stylesheet" href="doms.css">
    
    </head>
    <body> 
        <div class="container">
            <h1 id="main-heading">Favorite Movie Franchise</h1>
            <ul class="lists"> 
                <li class="list-items">The Matrix</li>
                <li class="list-items">Star Wars</li> 
                <li class="list-items">Harry Potter</li>
                <li class="list-items">Lord of the Rings</li>
                <li class="list-items">Marvel</li>
            </ul>
        </div>
        
    
    <script  src="app2.js" defer></script>
    </body>
</html>

js file

let title;
title = document.querySelector('#main-heading')


title.sty


console.log(title)

when i click title.sty (comes up with something else

3

  • The property is .style not .sty

  • The code you have isn’t doing anything to the styles.

Example

document.querySelector('#main-heading').style.color = 'red';

I don’t know what this means?

4

hi i expect to do title.style.color = ‘red’

been stuck now for 3 days on this, tried many sites, but so far no luck
with a very simply command

in the console it works title.style.color = ‘red’
but in vscode it wont let you complete this command

5

Everything works fine if you add the proper link that leads to the .js file in which you have put the js code you posted here:

image
image1263×293 27.6 KB

But, if you want the h1 color change on click, then your code is missing a function to trigger that action.

**HTML file**

<h1 id="main-heading" onClick="changeColor()">Favorite Movie Franchise</h1>

**js file**

function changeColor(){
let title;
title = document.querySelector('#main-heading')
title.style.color = "red";
}
6

well. i just hope we have at least 1 javascript expert here. Since i never receive any replies here to any questions.

7

There are replies to you in all the threads you have opened so I don’t know what you mean by you not getting any replies.

8

Ok well, was hoping to find a javasexpert here, but maybe next time. Anyways all i tried was to download in vscode anything related to javascript, and then vscode now shows the properties for the object, as shown here in the code…

for (let i = 0; i < listItems.length; i++) {
listItems[i].style.fontSize = ‘1.2em’
listItems[i].style.fontFamily = ‘Verdana’
listItems[i].style.borderRadius = ‘15%’
listItems[i].style.padding = ‘15px’
listItems[i].style.margin = ‘5px’
listItems[i].style.margin = ‘5px’
listItems[i].style.opacity = ‘.6’
listItems[i].style.color = ‘purple’
listItems[i].style.border = ‘solid red 2px’

}

9

What you are trying to do doesn’t require an “expert”, whatever that means.

The problem is you are not explaining what isn’t working for you. You also are posting incomplete code.

Another example:

<ul class="lists"> 
    <li class="list-items">The Matrix</li>
    <li class="list-items">Star Wars</li> 
    <li class="list-items">Harry Potter</li>
    <li class="list-items">Lord of the Rings</li>
    <li class="list-items">Marvel</li>
</ul>

const listItems = document.querySelectorAll(".list-items");

listItems.forEach((listItem) => {
  listItem.style.color = "red";
  listItem.style.fontWeight = "bold";
});
1 Like
10

/** @type {HTMLDivElement} */
use this comment just above, if vs code does not give you option for style for div .

1 Like
11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.