javascript - onclick trigger doesn't work first click - Stack Overflow

admin管理员组

文章数量:1316023

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>

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?

• javascript
• onclick

Share Improve this question Follow edited Jun 30, 2015 at 19:45 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Jun 30, 2015 at 19:43 thinkofacardthinkofacard 50111 gold badge77 silver badges1919 bronze badges 2

• 1 Try outputting elmnt.style.backgroundColor when you click on it. – j08691 Commented Jun 30, 2015 at 19:46
• @j08691 That would be "". – Praveen Kumar Purushothaman Commented Jun 30, 2015 at 19:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

It is because your element style is not transparent. Only your element's putedStyle 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>

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.

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>

本文标签： javascriptonclick trigger doesn39t work first clickStack Overflow