1

Okay, So I am looking to make a script where if this code contains the exact word "is123" the class "a" will be added to div id "#1" the problem is, ":contains" will work without EXACTLY containing the entire string. I did research and find answers, but none that I was able to understand and apply to my situation! Thanks!

div id 1 is a count down which is changed every second.

<div id="1">1:05</div>
<div class="2 hidden">ayyy</div>
<script>
if ($("#1").text().trim() === "1:05") {
$(".2").removeClass('hidden');
}
</script>
Improve this question
1
  • 1
    if ($('#1').text().trim() === 'is123') { $('#1').addClass('a'); } Commented May 3, 2016 at 2:57

4 Answers 4

Reset to default
3 
<div id="1">is123</div>
<script>
if ($("#1").text().trim() === "is123") {
    $("#1").addClass('a');
}
</script>

You need to put your script after the element, if it's before the element, it can't find the element because the DOM hasn't rendered it yet. Unless you wrap it in the 'jQuery document ready' function.

EDITED TO REFLECT CHANGES TO OP

<div id="1">is123</div>
<script>
if ($("#1").text().trim() === "is123") {
    $(".2").removeClass('hidden');
}
</script>
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

To be a tad more specific, should this script go in the server side or client side?
@xenonprozz JavaScript is a client-side scripting language. Put your div in the page as you usually would. And it's advised you place any JavaScript code just before/after the closing body tag.
I may have not explained correctly now that I notice. "if ($("#1").text().trim() === "is123") {" lets say, " $("#2").addClass('a');" if div #1 is equal to that text, a different div gets a class added.
@xenonprozz I'm sorry, I really don't understand what you're trying to say
@xenonprozz then you would simply change $("#1").addClass('a'); to $("#2").addClass('a');
|
1

Use this:

$("#1").text()==="is123"

=== means exact match

code:

<div id="1">is123</div>
<script>
if ($("#1").text()==="is123"){
    $("#1").addClass('a');
}
</script>
Improve this answer

5 Comments

great, could you give an example on how to implement it in the code above? I do believe I have tried that.
@xenonprozz added :)
@xenonprozz try this. I forgot to add brackets.
@xenonprozz sorry uh. I had an extra parenthesis
Still nothing for me
0

If you want to trigger an event when the timer reaches a certain point you can do it a couple of ways.

EXAMPLE 1

Preferably hook into the timer function itself if you have access to that code. This is probably the most efficient method:

// This runs immediately when timer is updated

function checkTime(timerValue) {
  if (timerValue == '01:05') {
    $('.alert').show();
  }
}

// SIMULATE YOUR TIMER - Courtesy of http://stackoverflow.com/a/20618517/1767412

function startTimer(duration, display) {
  var start = Date.now(),
    diff,
    minutes,
    seconds;

  function timer() {
    diff = duration - (((Date.now() - start) / 1000) | 0);
    minutes = (diff / 60) | 0;
    seconds = (diff % 60) | 0;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = minutes + ":" + seconds;
    if (diff <= 0) {
      start = Date.now() + 1000;
    }

    // Call your function to check the time
    checkTime(display.textContent);
  };
  timer();
  setInterval(timer, 1000);
}

window.onload = function() {
  var display = document.querySelector('#timer');
  startTimer(70, display);
};
.alert {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="timer"></div>
<div class="alert">Time to show this div!</div>
<div class="console"></div>

EXAMPLE 2

Or you can do something like below which is to poll the <div> contents at intervals and trigger the event when it matches your criteria. I don't like this as much because you've got an extra process running at a high frequency - but there are many cases where this might be the only option:

/*
This runs once every 0.1 seconds so it will trigger
almost immediately after the timer reaches 01:05
*/

var t = setInterval(function() {
  var timerValue = $("#timer").text().trim();
  if (timerValue == '01:05') {

    // Stop watching the timer once it matches
    clearInterval(t);

    // Show the div
    $(".alert").show();
  }
}, 100);


/*
SIMULATE YOUR TIMER
Courtesy of http://stackoverflow.com/a/20618517/1767412
*/

function startTimer(duration, display) {
  var start = Date.now(),
    diff,
    minutes,
    seconds;

  function timer() {
    diff = duration - (((Date.now() - start) / 1000) | 0);
    minutes = (diff / 60) | 0;
    seconds = (diff % 60) | 0;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = minutes + ":" + seconds;
    if (diff <= 0) {
      start = Date.now() + 1000;
    }
  };
  timer();
  setInterval(timer, 1000);
}

window.onload = function() {
  var display = document.querySelector('#timer');
  startTimer(70, display);
};
.alert {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="timer"></div>
<div class="alert">Time to show this div!</div>

Improve this answer

2 Comments

Okay, currently in my situation, the timer is in the backend, would that affect the code?
yup, hopefully you saw I gave you credit. looking back at this now it's amazing how much I've learned in two years thanks to SO
-1

Try this

<script>
if ($(#1).text() === "is123";).addClass('a'))
</script>

<div id="1">is123</div>
Improve this answer

2 Comments

@xenonprozz: No you missed the double quotes
this code does not work bud, we cannot use "cointains"

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.