CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tania Chanda
Tania Chanda

Reputation: 13

How can I disable a <div>

I am trying to build a simple traffic light with HTML, CSS and Javascript. Clicking on the light should change the color of the light (if I click when it is Green, it changes to Yellow and so on). HTML:

<div id="outer_box" onclick = "change()">
    <div id ="red"></div>
    <div id ="yellow"></div>
    <div id ="green"></div>
</div>

CSS: 

#outer_box{
  width: 70px;
  height:150px;
  background:black;
}

#red{
  width: 50px;
  height:50px;
  margin: auto;
  border-radius: 50%;
  background: red;
}

#yellow{
  width: 50px;
  height:50px;
  margin: auto;
  border-radius: 50%;
  background: yellow;
}

JavaScript:

var state;
state = "green"

function change(){
  if (state=="green"){
    state = "yellow"; 
  }
  else if (state== "yellow"){
    state = "red";
    //state_def();
  }
  else{
    state = "green";
    //state_def();
  }
  console.log(state);
  state_def();
}

function state_def(){
  console.log("inside state def")
  console.log(state);
  if (state == "green"){
    document.getElementById("yellow").disabled = true;
    //$("#yellow").prop('disabled',true);
    //$("#red").prop('disabled',true);
  }
  else if (state == "yellow"){
    $("#green").prop('disabled',true);
    $("#red").prop('disabled',true);
  }
  else{
    $("#yellow").prop('disabled',true);
    $("#green").prop('disabled',true);
  }
}

Here is the jsFiddle link: https://jsfiddle.net/taniachanda86/mx7r0hrL/

Please help me understand what is that I am doing wrong?

Upvotes: 1

Views: 277

Answers (5)

Jibin Balachandran
Jibin Balachandran

Reputation: 3441

I guess you wanted a traffic light which on click will glow the clicked light.If so, can be achieved by the below code.

$( document ).ready(function() {
  $('#red').css("background-color", "red");
  $('#yellow').css("background-color", "white");
  $('#green').css("background-color", "white");

  $('.trafficlight').click(function(){
    var selected_id=$(this).attr("id"); 
    if(selected_id=='green')
    {
        $('#green').css("background-color", "green");
        $('#red').css("background-color", "white");
        $('#yellow').css("background-color", "white");
    }

    else if(selected_id=='yellow')
    {
        $('#yellow').css("background-color", "yellow");
        $('#red').css("background-color", "white");
        $('#green').css("background-color", "white");
    }

    else
    {
        $('#red').css("background-color", "red");
        $('#yellow').css("background-color", "white");
        $('#green').css("background-color", "white");
    }
});

});
#outer_box{
width: 70px;
height:150px;
background:black;
}

#red{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background:red;
}

#yellow{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: yellow;
}

#green{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="outer_box" >
<div id ="red" class="trafficlight"></div>
<div id ="yellow" class="trafficlight"></div>
<div id ="green" class="trafficlight"></div>
</div>

Upvotes: 0

Sunil Lama
Sunil Lama

Reputation: 4539

The solution is quite simple.

$("#green").attr('disabled', true);

will show that your div is actually being disabled while you inspect element. However, it will not quite get you to point of having the css color affected by it.
Instead defining the opacity attribute will help you achieve your need.
Here is the plunker: https://plnkr.co/edit/mdlAS68gpFBm64jfiCCu?p=preview. I hope this is what you are asking for.

Upvotes: 1

kp singh
kp singh

Reputation: 1460

var colors = ["red", "yellow", "green"];
var state = 1;//because red already visible
//addEventListener method to add onclick handler
document.getElementById('outer_box').addEventListener('click', function(){
   if (state==3){//if state reaches to 3, reset to 0
      state = 0;
   }
   var allLights = document.querySelectorAll('.light');
   for(var i = 0; i < allLights.length; i++) {//remove active class from all light
     allLights[i].className = "light";
   }
   document.getElementById(colors[state]).className = "light active"; //add active class on the next light;
   state++;//increment state
 }, false);

I have updated your fiddle. check here

Upvotes: 1

ketan
ketan

Reputation: 19341

Following way you can do using JQuery. Add and remove active class.

First display one light. On click it will change.

var items = $('div.light');
var currentItem = items.filter('.active');
$('#outer_box').on('click', function() {
    var nextItem = currentItem.next();
    currentItem.removeClass('active');
    if ( nextItem.length ) {
        currentItem = nextItem.addClass('active');
    } else {
        currentItem = items.first().addClass('active');
    }
});
#outer_box{
  width: 70px;
  height:150px;
  background:black;
}

#red{
  width: 50px;
  height:50px;
  margin: auto;
  border-radius: 50%;
  background: red;
  display:none;
}

#yellow{
  width: 50px;
  height:50px;
  margin: auto;
  border-radius: 50%;
  background: yellow;
  display:none;
}

#green{
  width: 50px;
  height:50px;
  margin: auto;
  border-radius: 50%;
  background: green;
  display:none;
}

.active{
  display:block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer_box">
  <div id ="red" class="light active"></div>
  <div id ="yellow" class="light"></div>
  <div id ="green" class="light"></div>
</div>

Upvotes: 3

michael.kebe
michael.kebe

Reputation: 11085

Open your javascript console and see the failure:

Uncaught ReferenceError: change is not defined

change is not in scope of the onclick of the <div>.

This is because the Javascript part of jsfiddle is executed in the onload function. See https://stackoverflow.com/a/5468370/189058

Upvotes: 0

Related Questions