JQUERY HTML DIV hide and show based on label value

Question

I have a label , that shows dynamic values based on user actions. For example 1 or 2. I would like to show div element with id="charts_div" if the label value is "1" I would like to hide div element, if the value is "2" This example is simplified as possible, so I could get basic idea where i am stuck

HTML

<label id="label"></label>
 <div id="chart1_div" style="width:100%; height:200px"></div>
 <div id="chart2_div" style="width:100%; height:200px"></div>

JQUERY

$(document).ready( function() {
$('#label').bind('change', function (e) { 
if ($('#label').text() == "1")
{
$('#chart1_div').show();
$('#chart2_div').hide();

}
else if $('#label').text()=="2")
{
  $('#chart1_div').hide();
  $('#chart2_div').show();
}         
}).trigger('change');
});

You have a round ( bracket missing on your second if (else if). instead of binding to a change event for a label (which will never fire) why not call a function that does that check where the label is changed? — developer82, Jan 20 '14 at 16:12

score 3 · Accepted Answer · answered Jan 20 '14 at 16:09

3

You can't bind change event to an element that doesn't have that kind of event. Put this change logic inside the event that is actually doing the changing of the label's text.

answered Jan 20 '14 at 16:09

tymeJV

103,943
14
161
157

Yup. Also look at this question & answer for additional help: http://stackoverflow.com/questions/1091661/detect-element-content-changes-with-jquery – degenerate Jan 20 '14 at 16:10
I am getting there.thanks for advice about Bind change, i agree. – kaulainais Jan 21 '14 at 13:20
This is I was looking for $('mydiv').bind("DOMSubtreeModified",function(){ alert('changed'); }); – kaulainais Jan 21 '14 at 13:24

score 0 · Answer 2 · answered Jan 20 '14 at 16:25

As it was said, you can't bind a change event to a label. Make whatever is changing your label also change the divs being shown. Supposing it's a button, do something like this:

HTML

<label id="myLabel">1</label>
<button id ="myButton">Toggle between 1 and 2</button>
<div id="chart1_div" style="width:100%; height:200px">a</div>
<div id="chart2_div" style="width:100%; height:200px">b</div>

JS

$(document).ready( function() {
    $("#myButton").click(function(){
        if ($('#myLabel').text() == '1')
        {
            $("#myLabel").text('2');
            $('#chart1_div').show();
            $('#chart2_div').hide();
        } else if ( $('#myLabel').text()=='2')
        {
            $("#myLabel").text('1');
            $('#chart1_div').hide();
            $('#chart2_div').show();
        }        
    });
});

Check out a live example on this jsfiddle ;)

I would like to create event On Label change, but it does not work. — kaulainais, Jan 21 '14 at 13:17

JQUERY HTML DIV hide and show based on label value

2 Answers2