Activate an alert function when the text inside a div reaches the value of 10

Question

Activate an alert function when the text inside a div reaches the value of 10

Currently, I am developing a game where once a player reaches 10 strikes, an alert should pop up saying "Game Over". However, the alert function is not working as expected. The StrikeNumber ID corresponds to the DIV that should trigger the alert once it hits the value of 10. This functionality is written in pure JavaScript.

function GameOver(){
if (document.getElementById('StrikeNumber').text === "10"){
    alert("gameOVER");
   }
}

HTML DIVS

<div id="StrikeNumber">
0
</div>
<div id="ScoreNumber">
0
</div>

javascript html css

Answer 1

Answer №1

For individuals utilizing JQuery, the .change() method can be harnessed to incorporate specific logic within its framework.

$("#UpdateNumber").change(function(){
    alert('number has been updated');
});

Answer 2

For individuals utilizing JQuery, the .change() method can be harnessed to incorporate specific logic within its framework.

$("#UpdateNumber").change(function(){
    alert('number has been updated');
});

Answer 3

Answer №2

The text property is not available in the div element. You should instead use the textContent property.

if (document.getElementById('StrikeNumber').textContent === "10"){
    alert("Game Over");
   }

Learn how to retrieve text from a div tag using JavaScript

Answer 4

The text property is not available in the div element. You should instead use the textContent property.

if (document.getElementById('StrikeNumber').textContent === "10"){
    alert("Game Over");
   }

Learn how to retrieve text from a div tag using JavaScript

Answer 5

Answer №3

To handle the absence of any text, utilize either innerHTML or textContent. Your HTML seems to contain whitespace, so implementing trim() would be a more effective approach. Make sure to understand the difference between == and === by visiting this link.

function GameOver(){
if (document.getElementById('StrikeNumber').innerHTML.trim() === "10"){
     alert("gameOVER");
   }
}

Answer 6

To handle the absence of any text, utilize either innerHTML or textContent. Your HTML seems to contain whitespace, so implementing trim() would be a more effective approach. Make sure to understand the difference between == and === by visiting this link.

function GameOver(){
if (document.getElementById('StrikeNumber').innerHTML.trim() === "10"){
     alert("gameOVER");
   }
}

Answer 7

Answer №4

Here is a code snippet that may be helpful for you

(function() {

    var x = document.getElementById("StrikeNumber").innerHTML;

    if (x == 10) {
      alert("Game Over !!!");
    }

  }

)();

<div id="StrikeNumber">
  10
</div>
<div id="ScoreNumber">
  0
</div>

Answer 8

Here is a code snippet that may be helpful for you

(function() {

    var x = document.getElementById("StrikeNumber").innerHTML;

    if (x == 10) {
      alert("Game Over !!!");
    }

  }

)();

<div id="StrikeNumber">
  10
</div>
<div id="ScoreNumber">
  0
</div>

Answer 9

Answer №5

It is recommended to utilize innerHTML in order to retrieve the content of a div element.

function EndGame(){
    if (document.getElementById('StrikeNumber').innerHTML === "10"){
        alert("GAME OVER");
   }
}

Additionally, it is crucial to ensure that the EndGame() function is invoked following any update to the div's content.

Answer 10

It is recommended to utilize innerHTML in order to retrieve the content of a div element.

function EndGame(){
    if (document.getElementById('StrikeNumber').innerHTML === "10"){
        alert("GAME OVER");
   }
}

Additionally, it is crucial to ensure that the EndGame() function is invoked following any update to the div's content.

Answer 11

Answer №6

Here is a suggestion for you to attempt.

setInterval(function(){
  if(div.textContent === '10') {alert('got it!')}
}, 50);

Answer 12

Here is a suggestion for you to attempt.

setInterval(function(){
  if(div.textContent === '10') {alert('got it!')}
}, 50);

Activate an alert function when the text inside a div reaches the value of 10

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Implementing Adaptive Images in Bootstrap 5 for a Specified Design

Streaming HTTP content on a domain secured with HTTPS using HTML5

How can you prevent the browser from prompting to save your email and password when filling out a sign-up form?

Creating a design utilizing HTML columns with a set height and the ability to scroll horizontally

button bouncing effect when scrolling vertically

What is the best way to interact with a checkbox that has a label using Selenium in Node.js?

Using the factory pattern in a Node.js (Express) application

Retrieving the value of a cell in a table row by clicking on a particular column

Ways to send notifications through Firebase Cloud Messaging (FCM)

What is the best way to add portfolio projects into a React application?

A label in nativescript not displaying a two-digit number

Could this be an unattended 'error' occurrence?

Ensuring the Accuracy of POST Parameters Using Express-Validator

What is the method for updating the inner html of an image tag in HTML?

Using jQuery to swap an image with a div element and then using the image as the

Having trouble retrieving the default text from an input element using Selenium

Tips on stopping Bootstrap Modal from opening when element within trigger is clicked?

There seems to be an issue with the functionality of Bootstrap 4

Identifying the Occurrence of a Partial Insertion in Rails through JavaScript/jQuery

Discovering common time intervals without the date component in between