-1

i have H1 in css whose color is orange but when i make a click event in JS having a if statement requiring the color of H1 to be orange to proceed but it doesnt.i have a div which is just a red square and i gave it a display of none. and also when i log it into the console it shows display'' even tho i gave it a display none.

this is the html:-

<body>
    <h1>hello worrld</h1>
    <p>this is a p tag</p>
    <div></div>
    <button> click me!</button>

    <script src="app.js"></script>
</body>

this is the css:-

    h1{
    color: orange;
}
div{
    height: 100px;
    width: 100px;
    background-color: red;
    margin-bottom: 40px;
    display: none;
}

this is the javascript:-

const h1 = document.querySelector('h1');
const div = document.querySelector('div');
const btn = document.querySelector('button');


btn.addEventListener('click', () => { 
       
    if( h1.style.color == 'orange'){
        div.style.display = 'block';
    };
    
    console.log(div.style);
});
isplutoaplanet
  • 17
  • 5
  • Is the button inside a form? Clicking the button submits the form, which reloads the page and loses style changes. – Barmar Aug 30 '21 at 21:28
  • 1
    `h1.style` doesn't get the style from CSS, it only gets inline styles. – Barmar Aug 30 '21 at 21:29
  • @Barmar no its not in a form, its just a basic button – isplutoaplanet Aug 30 '21 at 21:29
  • 1
    Please add the HTML this css and js is for to your question or better yet add a working snippit that recreates your issue... – dale landry Aug 30 '21 at 21:30
  • 2
    Also `style` retrieves the inline styles not styles from a css class. For that you need to get the computed style, eg `window.getComputedStyle(yourElement)` – Patrick Evans Aug 30 '21 at 21:31
  • @barmar so if i put color: orange as a style tag in the H1 in HTML then it will work? is there a way to get JS to get directly from css file? – isplutoaplanet Aug 30 '21 at 21:32
  • 1
    Use `getComputedStyle` as @PatrickEvans suggested. – Barmar Aug 30 '21 at 21:33
  • @patrickevans how do i apply that here? will it be if ( window.getComputedStyle(h1) == 'orange'){ div.style.display = 'block'; }; – isplutoaplanet Aug 30 '21 at 21:37
  • `window.getComputedStyle(h1).color == 'orange'` (the idea is to use it instead of `h1.style`; you still need to state the style property you want to check somehow) –  Aug 30 '21 at 21:38
  • Duplicate: [Why element.style always return empty in JS?](https://stackoverflow.com/questions/50645188/why-element-style-always-return-empty-in-js) –  Aug 30 '21 at 21:40
  • @chrisG ok so i tried it using the code u typed and it didnt work. but when i did ```console.log(window.getComputedStyle(h1).color)``` it gives a rgb color. so instead of typing 'orange' in the if statement i used the rgb and it worked! how can i make it work if i wanted to keep the 'orange' in the if statement unchanged? – isplutoaplanet Aug 30 '21 at 21:46
  • That is a good question, however what's the specific use-case? There's no quick and easy answer to this mostly because in practice, you won't have to solve this. You will always either know the color (because you wrote it into the stylesheet) or be able to look it up in your variables (because you need to keep track of it anyway). –  Aug 30 '21 at 22:00
  • @chrisG yes true its not that hard to just get the RGB and also like you said not much of a use case. just wanted to know if there was a way. also my doubts are cleared and i understood the concept of getcomputedstyles. thanks! also how do i close this question poll? – isplutoaplanet Aug 30 '21 at 22:09
  • You should be able to delete the question, if that's what you're asking? Check the links right below it. If you can't, it's because somebody posted an answer. There's not much you can do in that case. –  Aug 30 '21 at 22:23

1 Answers1

0

now on your script

console.log(h1.style.color);

this returns empty string.

if you set style in element,

<h1 style="color:red">hello worrld</h1>

then

console.log(h1.style.color);

will return "red"

Costomaroba Romina
  • 57
  • 3