How can I disable a

Question

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?

have you added the script to your html and add the jquery library and see — Alhuck, Feb 17 '16 at 08:45
Are you trying to achieve something similar to this? https://jsfiddle.net/Xotic750/n6LgZ/ — Nitesh, Feb 17 '16 at 08:45
When the state is "green", I just want to show the green circle div, not the "yellow" and the "red" one. Any technique to disable is fine. — Tania Chanda, Feb 17 '16 at 08:46
@NKL: Yes. I am trying to achieve something very similar to what you have shared. Thanks. — Tania Chanda, Feb 17 '16 at 08:48
@TaniaChanda - So you can re-consider looking at that code and re-modify your fiddle to achieve what you are looking for. — Nitesh, Feb 17 '16 at 08:50

score 3 · Answer 1 · answered Feb 17 '16 at 09:06

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>

i actually went with his original code where he wanted to have the disable work for him, however disabling the div itself didn't affect the css so, i went with opacity. Nevertheless, having the .attr('disabled', true) would achieve what he needed by the question. — Sunil Lama, Feb 17 '16 at 09:47

kp singh · Answer 2 · 2016-02-17T09:22:34.510

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

I had typed JS comment in css section. I have updated the same and the link as well — kp singh, Feb 17 '16 at 09:26

score 1 · Accepted Answer · answered Feb 17 '16 at 09:38

1

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.

answered Feb 17 '16 at 09:38

Sunil Lama

4,531
1
18
46

1

Hey, thanks for the explanation. I was confused why $("#green").attr('disabled', true); is not making the div disabled. – Tania Chanda Feb 17 '16 at 18:41
Thanks for the appreciation. – Sunil Lama Feb 18 '16 at 02:34

score 0 · Answer 4 · edited May 23 '17 at 12:31

0

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

edited May 23 '17 at 12:31

Community

1
1

answered Feb 17 '16 at 08:53

michael.kebe

10,916
3
44
62

Jibin Balachandran · Answer 5 · 2016-02-17T10:48:56.753

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>

How can I disable a

5 Answers5