JavaScript: different behavior if CSS is inline vs inside

Question

I checked, and though I found a similar answer from 3 years ago (button turns background green), the answer was not quite satisfactory, as the top respondent basically said, "Works fine for me".

My Document: I have a table of four white boxes. When a box is clicked, the box's background turns blue. If the background is already blue, it turns white.

My Problem: The top-left box in the table requires only 1 click to change color, but the other 3 blocks require double-clicks. The only difference between the single-click block and the double-click blocks is that the background-color is explicitly stated inline for the first block, while the double-click boxes have their background-color stated in the head of the document.

My Question: Why is this happening? It is almost as though for the 3 blocks requiring double-click, their background color is not "white" to begin with, which would lead my JavaScript to color them white on the first click before coloring them blue on the second click. That is my best guess. Your thoughts?

<!DOCTYPE html>
<html>
<head>
<title>Check Answers Test</title>
<style> table, th, td {border: 2px solid black; text-align: center; background-color: white;} </style>
<script> 
function myScript(element){
    if (element.style.backgroundColor != "white"){
        element.style.backgroundColor = "white";
    }else{
        element.style.backgroundColor = "#99ccff";
    }
}
</script>

</head>
<body>

<table>
<thead>
    <tr>
    <td onclick="myScript(this)" style="background-color:white;">1</td>
    <td onclick="myScript(this)">2</td>
    </tr>
</thead>
<tbody>
    <tr>
    <td onclick="myScript(this)">象</td>
    <td onclick="myScript(this)">象</td>
    </tr>
</tbody>
</table>
</body>
</html>

EDIT: Someone suggested below I reverse the logic for the color change (change blue if not blue). However, I did it this way my first time coding the document, and I cannot get the boxes to return to "white" after turning blue. Observe:

<!DOCTYPE html>
<html>
<head>
<title>Check Answers Test</title>
<style> td {border: 2px solid black; text-align: center; background-color: white;} </style>
<script> 
function myScript(element){
    if (element.style.backgroundColor != "#99ccff"){
        element.style.backgroundColor = "#99ccff";
    }else{
        element.style.backgroundColor = "white";
    }
}
</script>

</head>
<body>

<table>
<thead>
    <tr>
    <td onclick="myScript(this)" style="background-color:white;">1</td>
    <td onclick="myScript(this)" >2</td>
    </tr>
</thead>
<tbody>
    <tr>
    <td onclick="myScript(this)" >象</td>
    <td onclick="myScript(this)" >象</td>
    </tr>
</tbody>
</table>
</body>
</html>

The inline CSS has a cascading precedence over the offline \ external \ or on the head CSS and so does JavaScript-ed CSS. — Bekim Bacaj, Dec 17 '20 at 18:49
The thing is, that the JS checks first if the `inline style` `background-color = white`. However there is no background color as inlien style applied yet. so it the rule does not apply andtherefor an inline style with the abckground color white is added. — tacoshy, Dec 17 '20 at 18:50

Reto · Answer 1 · 2020-12-17T18:56:04.430

1

This is because intially the element.style.backgroundColor != "white" condition is true for those elements not having the style directly declared on the element. So after the first click it gets the attribute white.

edited Dec 17 '20 at 18:56

answered Dec 17 '20 at 18:50

Reto

1,305
1
18
32

I guess my real question is then, what does do if not give a style attribute to all td elements? – DrTinyCat Dec 17 '20 at 18:56
2

it changes the background color. However the JS script does not actually check if the back-ground color is white but if the inline styling is settign it to white. As no inline styling exist, the rule is true. – tacoshy Dec 17 '20 at 18:57
Oh geez. That's good to know. Any suggestions on how to have JavaScript check if an element is styled in the ? Or is this just my life now? – DrTinyCat Dec 17 '20 at 19:01
nevermind someone suggested a link below. Thank you for your answer! – DrTinyCat Dec 17 '20 at 19:06
1

Your JS script only checks attributes of elements within the DOM. – Reto Dec 17 '20 at 19:07
Thank you very much! – DrTinyCat Dec 17 '20 at 19:09

Steve Tomlin · Answer 2 · 2020-12-17T19:52:36.973

1

This is whats happening:

box 1 has background style colour set to white.
box 2,3,4 do not have background style colour set to white. They may be white because the default bg is white, but your if statement is not asking if they have no background colour style set.
Reverse your code order and it will fix it: UPDATED

  if (element.style.backgroundColor === "#99ccff"){
        element.style.backgroundColor = "white";
  } else {
    element.style.backgroundColor = "#99ccff";
  }

edited Dec 17 '20 at 19:52

answered Dec 17 '20 at 18:52

Steve Tomlin

3,391
3
31
63

they are white because the head style delcares their background color as white. However JS does not check for head style or external css styling just inline styling. – tacoshy Dec 17 '20 at 18:55
1

Ah - the code was hidden in the scrollbar. I didn't see it. In that case check for this: Window.getComputedStyle() – Steve Tomlin Dec 17 '20 at 18:57
Actually, I tried this way initially. The problem with this is that the boxes don't change back to white, even though the code states it should. – DrTinyCat Dec 17 '20 at 19:02
I added the code with the edit you suggested above so you can try it for yourself. It doesn't change back. :( – DrTinyCat Dec 17 '20 at 19:05
You are right. Sorry. Try again the fix. I've updated answer – Steve Tomlin Dec 17 '20 at 19:53

score 1 · Answer 3 · answered Dec 17 '20 at 18:57

1

if you want to get CSS property via element.style. - you should set a property in style attr.

For getting CSS property from active CSS styles you can use window.getComputedStyle(element);

answered Dec 17 '20 at 18:57

Badyanchik

111
3

Thank you very much! – DrTinyCat Dec 17 '20 at 19:09

score 1 · Answer 4 · answered Dec 17 '20 at 19:05

1

You can try this if you like...

<!DOCTYPE html>
<html>
<head>
<title>Check Answers Test</title>
<style>
 table, th, td
 {
  border: 2px solid black;
  text-align: center;
  background-color: white;
 }
 </style>
<script> 

function myScript(element){

    if (element.style.backgroundColor == ""/*unchanged*/){
        element.style.backgroundColor = "#99ccff"/*change*/;
    }else{
        element.style.backgroundColor = ""/*unchanged*/;
    }
}
</script>

</head>
<body>

<table>
<thead>
    <tr>
    <td onclick="myScript(this)">1</td>
    <td onclick="myScript(this)">2</td>
    </tr>
</thead>
<tbody>
    <tr>
    <td onclick="myScript(this)">象</td>
    <td onclick="myScript(this)">象</td>
    </tr>
</tbody>
</table>
</body>
</html>

answered Dec 17 '20 at 19:05

Bekim Bacaj

5,707
2
24
26

Holy Moly THANK YOU! TIL about ""/*unchanged*/ – DrTinyCat Dec 17 '20 at 19:08
@DrTinyCat ;) it used to bite me, back in 1997/98 (and I wasn't alone) that's why they had to implement a new property, namely the 'currentStyle' IE 4.01 (introduction) and W3C lazy reaction to obviously break the inter-browser compatibility with built-in function [window].computedStyle etc came a century later. But checking if the style was still default before switching it, - it seems never came to anybody's mind! :D Have fun! – Bekim Bacaj Dec 17 '20 at 19:15

score 0 · Accepted Answer · answered Dec 17 '20 at 18:58

As you thought, and as others have said, your javascript doesn't recognize the background to white. This is because element.style is used to get or to set the inline css. You can read more here.

What is usually done instead is to set a class to your elements:

<td class="white" onclick="myScript(this)">2</td>

In your css you would define what your classes do, and you will then use Javascript just to toggle between the classes

JavaScript: different behavior if CSS is inline vs inside

5 Answers5