2

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>

Improve this question
2
  • The inline CSS has a cascading precedence over the offline \ external \ or on the head CSS and so does JavaScript-ed CSS. Commented Dec 17, 2020 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. Commented Dec 17, 2020 at 18:50

5 Answers 5

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I guess my real question is then, what does <style> td {background-color: white;} </style> do if not give a style attribute to all td elements?
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.
Oh geez. That's good to know. Any suggestions on how to have JavaScript check if an element is styled in the <head>? Or is this just my life now?
nevermind someone suggested a link below. Thank you for your answer!
Your JS script only checks attributes of elements within the DOM.
|
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);

Improve this answer

1 Comment

Thank you very much!
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>

Improve this answer

2 Comments

Holy Moly THANK YOU! TIL about ""/*unchanged*/
@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!
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";
  }
Improve this answer

5 Comments

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.
Ah - the code was hidden in the scrollbar. I didn't see it. In that case check for this: Window.getComputedStyle()
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.
I added the code with the edit you suggested above so you can try it for yourself. It doesn't change back. :(
You are right. Sorry. Try again the fix. I've updated answer
0

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

Improve this answer

1 Comment

Thank you very much!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.