onclick trigger doesn't work first click

Question

I'm confused why the onclick function doesn't register the first time it is clicked. Each div with the onclick trigger has to be clicked twice the first time.

function selected(elmnt) {
  if (elmnt.style.backgroundColor == "transparent")
    elmnt.style.backgroundColor = "#990000"
  else
    elmnt.style.backgroundColor = "transparent"
}

#container {
  background-color: transparent;
  height: 100px;
  width: 100px;
}

<div id="container" onclick="selected(this)">click me</div>

Am I missing something here?

Answer 1

It is because your element style is not transparent. Only your element's computedStyle is. Try this:

function selected(elmnt) {
  if (elmnt.style.backgroundColor == "transparent")
    elmnt.style.backgroundColor = "#990000"
  else
    elmnt.style.backgroundColor = "transparent"
}

#container {
  background-color: transparent;
  height: 100px;
  width: 100px;
}

<div id="container" onclick="selected(this)" style="background-color: transparent;">click me</div>

There's also the natural way:

function selected(elmnt) {
  if (elmnt.style.backgroundColor == "")
    elmnt.style.backgroundColor = "#990000"
  else
    elmnt.style.backgroundColor = ""
}

#container {
  background-color: transparent;
  height: 100px;
  width: 100px;
}

<div id="container" onclick="selected(this)">click me</div>

Answer 2

The element doesn't start with a background-color of transparent so it always goes to the else. Changing the div to

<div id="container" onclick="selected(this)" style='background-color:transparent'>www</div>

will make it work. A css style sheet doesnt' append style to the DOM elements physically.

Answer 3

Both answers above absolutely agree initially style is not set.

Just to tell you for next time how to DEBUG it us console.log() click F12 for developer tools then console tab

I am fan of short IFs when simple IF

 <script>
    function selected(elmnt) {
        console.log(elmnt.style.backgroundColor)
        var bG= elmnt.style.backgroundColor
        elmnt.style.backgroundColor = ( bG == '' || bG == "transparent") ? "#990000" : "transparent";
    }      
</script>