Change div css if span contain text

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>

See this https://stackoverflow.com/questions/39221775/trigger-for-span-text-html-on-changed — 3960278, Nov 24 '17 at 10:22
Possible duplicate of [Trigger for span text/html on changed](https://stackoverflow.com/questions/39221775/trigger-for-span-text-html-on-changed) — Andrew Bone, Nov 24 '17 at 10:24

score 0 · Answer 1 · answered Nov 24 '17 at 10:24

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");
    }
});

score 0 · Answer 2 · answered Nov 24 '17 at 10:25

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>

Change div css if span contain text

2 Answers2