jQuery Highlighting Text Not Working Using .css("background-color")

user_10636563 0
Viewed 52

I'm trying to have it so when the user enters a number below 1 and higher than 20, they will get an error code and it will be highlighted yellow. When the user clicks the greet button, the text from before should disappear.

Right now with the highlight code I have it works but it messes up my disappearing of the text. For example, when I say 2, and then 22, the text from 2 doesn't disappear. When I do 22, then 2, the text disappears. I'm not sure if I have the layout wrong, or I need to use a different way. Lost on what is causing my issues.

function greetMe() {
  $('#errors').css("background-color", "white");
  var name = document.getElementById('txtName').value;
  var nr = document.getElementById('txtNmr').value;

  if (nr > 0 && nr < 21) {
    $('#errors').text('');
    $('#greetings').text('');
    for (var counter = 0; counter < nr; counter = counter + 1) {
      $('#greetings').append("Hello, " + name + "<br />");
    }
  } else {
    $('#errors').append("Please Enter A Number Between 1 and 20");
    $('#errors').css("background-color", "yellow");
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <p>Type in your name</p>
  <input type="text" id="txtName">
  <p>Enter a number 1-20.</p>
  <input type="text" id="txtNmr">
  <input type="button" value="Greet Me!" onclick="greetMe()">
  <hr>
  <div id="greetings">
    <!-- Section to output the greeting -->
  </div>
  <div id="errors">
    <!-- Section to output the greeting -->
  </div>

css html jquery javascript
3 Answers

You need to set the text of #errors and #greetings to an empty string before the if/else statement. Otherwise, the text will only be removed if the input is valid and not otherwise since you are only setting the text of those elements inside the if statement and not the else part.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" ></script>
 <body>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
  <!-- Section to output the greeting -->
</div>
<div id="errors">
  <!-- Section to output the greeting -->
</div>
<script type="text/javascript">
function greetMe(){
  $('#errors').css("background-color", "white");
  var name = document.getElementById('txtName').value;
  var nr   = document.getElementById('txtNmr').value;
$('#errors').text('');
$('#greetings').text('');
 if (nr > 0 && nr < 21){
for (var counter = 0; counter < nr; counter = counter + 1) {      
    $('#greetings').append("Hello, " + name + "<br />");
  }
  }
  else{
    $('#errors').append("Please Enter A Number Between 1 and 20");
    $('#errors').css("background-color", "yellow");
  }
}
</script>
</body>

JSFiddle: http://jsfiddle.net/tsgh3o6u/

user_95131840

Just write the below piece of code: 

 $('#errors').text('');
 $('#greetings').text('');

outside of the if/else statement, it solves your problem.

There is another way to empty a div element using the following piece of code:

  $('#errors').html('');
  $('#greetings').html('');

It also solves your problem, I have attached working example of it:

function greetMe(){
  $('#errors').css("background-color", "white");
  var name = document.getElementById('txtName').value;
  var nr   = document.getElementById('txtNmr').value;

  $('#errors').html('');
  $('#greetings').html('');

 if (nr > 0 && nr < 21) {
  for (var counter = 0; counter < nr; counter = counter + 1) {          $('#greetings').append("Hello, " + name + "<br />");
    }
  }
  else{
     $('#errors').append("Please Enter A Number Between 1 and 20");
     $('#errors').css("background-color", "yellow");
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
  <!-- Section to output the greeting -->
</div>
<div id="errors">
  <!-- Section to output the greeting -->
</div>

Hope, it solves your problem.

user_105994190

You can use .empty() function of jquery to clear the content of the div and you have to clear the div content before checking the conditions.

function greetMe() {
  $("#errors").css("background-color", "white");
  var name = document.getElementById("txtName").value;
  var nr = document.getElementById("txtNmr").value;
  $("#errors").empty();
  $("#greetings").empty();
  if (nr > 0 && nr < 21) {
    for (var counter = 0; counter < nr; counter = counter + 1) {
      $("#greetings").append("Hello, " + name + "<br />");
    }
  } else {
    $("#errors").append("Please Enter A Number Between 1 and 20");
    $("#errors").css("background-color", "yellow");
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
  <!-- Section to output the greeting -->
</div>
<div id="errors">
  <!-- Section to output the greeting -->
</div>

user_104032670
Related