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>
skdfsfwse
  • 19
  • 7

4 Answers4

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>
Mark Eriksson
  • 1,455
  • 10
  • 19
  • To be a tad more specific, should this script go in the server side or client side? – skdfsfwse May 03 '16 at 03:20
  • @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. – Mark Eriksson May 03 '16 at 03:22
  • 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. – skdfsfwse May 03 '16 at 03:25
  • @xenonprozz I'm sorry, I really don't understand what you're trying to say – Mark Eriksson May 03 '16 at 03:27
  • @xenonprozz then you would simply change `$("#1").addClass('a');` to `$("#2").addClass('a');` – Mark Eriksson May 03 '16 at 03:30
  • @xenonprozz does the element exist? – Mark Eriksson May 03 '16 at 03:32
  • I have updated my post Mark, please refer to that. currently i have an element class lets call it "2" with an added class "hidden" , I would like to trigger the removal of the class "hidden" if the text for "div id #1" is equal to is123, understood? – skdfsfwse May 03 '16 at 03:35
  • Okay Mark, I have retested this and have not found luck. currently div id 1 is constantly being changed due to the fact it is a countdown, would this affect the search for "is123" ? – skdfsfwse May 03 '16 at 03:42
  • Does this make sense Mark? – skdfsfwse May 03 '16 at 04:13
1

Use this:

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

=== means exact match

code:

<div id="1">is123</div>
<script>
if ($("#1").text()==="is123"){
    $("#1").addClass('a');
}
</script>
sguan
  • 1,039
  • 10
  • 26
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>
But those new buttons though..
  • 21,377
  • 10
  • 81
  • 108
-1

Try this

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

<div id="1">is123</div>
Bhugy
  • 711
  • 2
  • 8
  • 23