1

Why is my code not working?

I want to check if the color of the paragraph is white(it is white because of the css) and when it is white i want to change it to black so it is visible

function myFunction() {
  if (document.getElementById("lol").style.color === "white") {
    document.getElementById("lol").style.color = "black";
  }
}
p {
  color: white;
}
<button onclick="myFunction()">Try it</button>

<p id="lol">adadada</p>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
nirualjs
  • 33
  • 5
  • What is your problem statement here because it seems like you might not need any JavaScript for this – maxshuty Sep 30 '21 at 12:51
  • 1
    make sure to close the `` correctly and move the style to `` in the HTML – Viira Sep 30 '21 at 12:51
  • 1
    Why do make something visible via their color? Add a class "hidden" with `display: none` and toggle that class. – Andreas Sep 30 '21 at 12:51
  • You need computed style – mplungjan Sep 30 '21 at 12:51
  • 1
    The `.style` property of an element only gives you the values that are defined on that element (via `style="..."`) or if you've changed that value before in your script. – Andreas Sep 30 '21 at 12:52
  • Checking CSS properties directly is [best avoided](/q/55071684/4642212), especially for color values. Instead, a CSS class should be used, e.g. `.black { color: black; }`; then [`.classList.contains("black")`](//developer.mozilla.org/docs/Web/API/Element/classList) to check for its existence, `.classList.toggle("black")`, etc. – Sebastian Simon Sep 30 '21 at 12:56
  • @SebastianSimon Like I do. Toggling using classlist – mplungjan Sep 30 '21 at 12:58

2 Answers2

1

The element does not have that property because it is defined in the css class. you need to define it inline or with javascript.

function myFunction() {
  if (document.getElementById("lol").style.color === "white") {
    document.getElementById("lol").style.color = "black";
  }
}
p { /* this is useless now */
  color: white;
}
<button onclick="myFunction()">Try it</button>

<p id="lol" style="color: white;">adadada</p>
Jesper
  • 1,007
  • 7
  • 24
  • `/* this is useless now */` - Why is it then part of your question? And why should OP change the style declaration with inline CSS when there are better ways? And please use variables to store the DOM element instead of querying the DOM twice for the same element. – Andreas Sep 30 '21 at 12:55
  • @Andreas I don't think there is a point in any of this. I just answered the question with an explanation. I don't think OP even wants a "better way", he just wants it to work. I do agree with you, this is not the best way. – Jesper Sep 30 '21 at 12:59
-1

You don't know the color at the time you test because the color is not inline. You need to check the computed style or just use a ternary

function myFunction() {
  const lol = document.getElementById("lol");
  
  console.log(window.getComputedStyle(lol, null).color)

// the above is too complicated so why not just change to black if not black?
  
  lol.style.color = lol.style.color === "black" ? "white" : "black";
}
p {
  color: white;
}
<button onclick="myFunction()">Try it</button>

<p id="lol">adadada</p>

Better: Toggle the class

function myFunction() {
  const lol = document.getElementById("lol");
  
  console.log(lol.classList.contains("white")); // can be used or just toggle

  lol.classList.toggle("white")
}
.white {
  color: white;
}
<button onclick="myFunction()">Try it</button>

<p id="lol" class="white">adadada</p>
mplungjan
  • 169,008
  • 28
  • 173
  • 236