CODEWITHSUNDEEP
javascripthtml
user2615031
user2615031

Reputation:

Javascript if and else runs simultaneously

I want a link to select by onclick, when the link is clicked so selected, the background should change. When I click the selected link again then the background should be transparent again.

My Script:

<div style="background: transparent;" onclick="click()" id="0">

HTML:

Click 
function click() {
  var click = document.getElementById("0");
  if(click.style.background == "transparent") {
    click.style.background = "red";
  }
  else {
    click.style.background = "transparent";
  }
}

Upvotes: 0

Views: 117

Answers (3)

OJay
OJay

Reputation: 4921

Two things here, don't call the function click, and use the backgroundColor property, not background as background is a compound property expecting more values than just the color, so comparing it to just a color (i.e. = 'transparent") may not work

so

HTML:

<div style="background-color: transparent;" onclick="notclick()" id="0">

Javascript

function notclick() {
  var click = document.getElementById("0");
  if(click.style.backgroundColor == "transparent") {
    click.style.backgroundColor = "red";
  }
  else {
    click.style.backgroundColor = "transparent";
  }
}

EDIT

to handle mutliple div

every div that you want the behaviour, should be like this (i.e. with the onclick(this))

<div style="background-color: transparent;" onclick="notclick(this)" id="0">
<div style="background-color: transparent;" onclick="notclick(this)" id="1">
<div style="background-color: transparent;" onclick="notclick(this)" id="2">

and the javascript should be

function notclick(ele) {

  if(ele.style.backgroundColor == "transparent") {
    ele.style.backgroundColor = "red";
  }
  else {
    ele.style.backgroundColor = "transparent";
  }
}

or better still

function notclick(ele) {     
  ele.style.backgroundColor = (ele.style.backgroundColor == "transparent" ? "red" :"transparent");
  }

Upvotes: 1

St&#233;phane de Luca
St&#233;phane de Luca

Reputation: 13583

As far as I understand, you simply want a toggle. Functional code as follows.

2 important notes:

  • ID must not be zero (or it breaks): I replaced it by 10;
  • don't use click() as it's a reserved name: I replaced it by toggle().

Not much change to your code apart from the above. Cheers.

Update to handle multiple divs: I now pass the object:

<html>
        <body>
            <div style="background: red;" onclick="toggle(this)" id="10">
                    CLICK ON 10 TO TOGGLE MY BACKGROUND COLOR
            </div>
            <div style="background: red;" onclick="toggle(this)" id="20">
                    CLICK ON 20 TO TOGGLE MY BACKGROUND COLOR
            </div>
            <script>
                function toggle(o) {
                  if(o.style.background == "transparent") {
                    o.style.background = "red";
                    alert("red on "+o.id);
                  }
                  else {
                    o.style.background = "transparent";
                    alert("transparent on "+o.id);
                  }
                }
            </script>
        </body>
</html>

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

The problem is the method name click, inside the onclick handler it refers to the internal click method - fiddle - here click is a native method, not our method

Rename it and it should be fine - you need to use backgroundColor

<button onclick="testme()">Test</button>

then

function testme() {
    var click = document.getElementById("0");
    if (click.style.background == "red") {
        click.style.background = "transparent";
    } else {
        click.style.background = "red";
    }
}

Demo: Fiddle

Upvotes: 0

Related Questions