如果span包含文本，则更改div CSS

Question

I have one input and span. When I type in input value is passed to span. Now I want to hide other div/button or something if my span have specific value. My code don't work. What's wrong?

 $('#input').on('keyup', function(){ $('#status').html($(this).val()); }); $('#status').on('change', function(){ var status = $('#status').html(); if (status == "OK") { $('#test').css("background", "red"); } else { $('#test').css("background", "blue"); } }); 

 #test { width: 50px; height: 50px; background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="input"> <span id="status"></span> <div id="test"></div> 

Answer 1

Instead of checking changes on span element, it is better to do this logic inside of input event listener. Something like this:

$('#input').on('keyup', function(){
    var val = this.value;

    $('#status').html(val);

    if (val == "OK") {
        $('#test').css("background", "red");
    } else {
        $('#test').css("background", "blue");
    }
});

Answer 2

Liste the keyup event and change the background

 $('#input').on('keyup', function(){ $('#status').html($(this).val()); console.log($(this).val()); if ($('#status').html() == "OK") { $('#test').css("background", "red"); } else { $('#test').css("background", "blue"); } }); 

 #test { width: 50px; height: 50px; background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="input"> <span id="status"></span> <div id="test-container"> <div id="test"></div> </div>