Show the text based on the current count of the counter

Question

Show the text based on the current count of the counter

Currently, I have a simple Javascript counter function:

<body>
    <script type="text/javascript">
    var clicks = 0;
    function onClick() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
    };
    </script>
    <button type="button" onClick="onClick()">Add One To Chain</button>
    <p>Chain: <a id="clicks">0</a></p>

</body>

Now, I want to display different text messages to the user at various count points.

For example, when the counter hits 10, it should say hello. At 20, it could encourage the user to keep going, and at 30 - STOP! and so on.

I would appreciate any assistance with this task!

javascript

Answer 1

Answer №1

If you want to implement different actions based on the number of clicks, a switch statement can be useful:

switch (clicks) {
    case 10:
        message = 'Hello';
        break;
    case 20:
        message = 'Keep going';
        break;
    case 30:
        message = 'STOP';
        break;
    default:
        message = clicks;
        break;
}
document.getElementById("clicks").textContent = message;

Answer 2

If you want to implement different actions based on the number of clicks, a switch statement can be useful:

switch (clicks) {
    case 10:
        message = 'Hello';
        break;
    case 20:
        message = 'Keep going';
        break;
    case 30:
        message = 'STOP';
        break;
    default:
        message = clicks;
        break;
}
document.getElementById("clicks").textContent = message;

Answer 3

Answer №2

This method takes a dynamic approach to alerting. It will display alerts based on the values provided in the prompts array.

var clicks = 0,
    prompts = ['Hey there', 'Almost finished', 'PAUSE'];

function handleClick()
{
    clicks += 1;

    var promptIndex = clicks / 10 - 1;

    if (clicks % 10 == 0 && prompts[promptIndex] !== undefined) {
        alert(prompts[promptIndex]);
    }

    document.getElementById("clicks").innerHTML = clicks;
};

Answer 4

This method takes a dynamic approach to alerting. It will display alerts based on the values provided in the prompts array.

var clicks = 0,
    prompts = ['Hey there', 'Almost finished', 'PAUSE'];

function handleClick()
{
    clicks += 1;

    var promptIndex = clicks / 10 - 1;

    if (clicks % 10 == 0 && prompts[promptIndex] !== undefined) {
        alert(prompts[promptIndex]);
    }

    document.getElementById("clicks").innerHTML = clicks;
};

Answer 5

Answer №3

To make this function properly, you can implement if-else statements in Javascript.

Below is a functional example:

var count = 0;

function incrementCount() {

  count += 1;

  if (count == 10) {
    alert("Hello");
  } else if (count == 20) {
    document.getElementById("count").style.color = "green";
    document.getElementById("count").innerHTML = count + " Keep Going";
  } else if (count == 30) {
    document.getElementById("count").style.color = "red";
    document.getElementById("count").innerHTML = count + " Stop!";
  } else {
    document.getElementById("count").innerHTML = count;
  }
}

<button type="button" onClick="incrementCount()">Increase Count by One</button>
<p>Count: <a id="count">0</a>
</p>

Answer 6

To make this function properly, you can implement if-else statements in Javascript.

Below is a functional example:

var count = 0;

function incrementCount() {

  count += 1;

  if (count == 10) {
    alert("Hello");
  } else if (count == 20) {
    document.getElementById("count").style.color = "green";
    document.getElementById("count").innerHTML = count + " Keep Going";
  } else if (count == 30) {
    document.getElementById("count").style.color = "red";
    document.getElementById("count").innerHTML = count + " Stop!";
  } else {
    document.getElementById("count").innerHTML = count;
  }
}

<button type="button" onClick="incrementCount()">Increase Count by One</button>
<p>Count: <a id="count">0</a>
</p>

Answer 7

Answer №4

To simplify the process, follow this example with detailed comments for better understanding.

<body>
  <script type="text/javascript">
    var clicks = 0;
    function onClick() {
      clicks += 1;
      var nextClick = clicks + 1; // Keeping track of the next click
      document.getElementById("clicks").innerHTML = clicks;

      // Checking for specific click counts
      switch (nextClick) {
        case 10:
          // Display a message in div#message.
          document.getElementById('message').innerHTML = 'hello';
          break;

        case 30:
          document.getElementById('message').innerHTML = 'STAHP';
          break;
      }
    };
  </script>
  <button type="button" onClick="onClick()">Add One To Chain</button>
  <p>Chain: <a id="clicks">0</a></p>

  <!-- Container for JS messages -->
  <div id="message"></div>
</body>

Trust this explanation helps!

Answer 8

To simplify the process, follow this example with detailed comments for better understanding.

<body>
  <script type="text/javascript">
    var clicks = 0;
    function onClick() {
      clicks += 1;
      var nextClick = clicks + 1; // Keeping track of the next click
      document.getElementById("clicks").innerHTML = clicks;

      // Checking for specific click counts
      switch (nextClick) {
        case 10:
          // Display a message in div#message.
          document.getElementById('message').innerHTML = 'hello';
          break;

        case 30:
          document.getElementById('message').innerHTML = 'STAHP';
          break;
      }
    };
  </script>
  <button type="button" onClick="onClick()">Add One To Chain</button>
  <p>Chain: <a id="clicks">0</a></p>

  <!-- Container for JS messages -->
  <div id="message"></div>
</body>

Trust this explanation helps!

Answer 9

Answer №5

[Updated]: A better approach for maintainability is to store steps and messages in an object instead of hardcoding them within a switch case loop.

var clicks = 0;
var messages = {"10": "hello", "20": "keep going", "30": "stop"};
function onClick() {
  clicks++;
  document.getElementById("clicks").innerHTML = (messages.hasOwnProperty(clicks.toString())) ? messages[clicks.toString()] : clicks;
  return;      
};

Check out this fiddle

Answer 10

[Updated]: A better approach for maintainability is to store steps and messages in an object instead of hardcoding them within a switch case loop.

var clicks = 0;
var messages = {"10": "hello", "20": "keep going", "30": "stop"};
function onClick() {
  clicks++;
  document.getElementById("clicks").innerHTML = (messages.hasOwnProperty(clicks.toString())) ? messages[clicks.toString()] : clicks;
  return;      
};

Check out this fiddle

Answer 11

Answer №6

let counter = 0;
const counterElement = document.getElementById("counter");

const messagesList = {
  10: {
    alertText: "Hello"
  },
  20: {
    cssClass: "keep-going",
    message: "Keep Going"
  },
  30: {
    cssClass: "stop",
    message: "Stop !!"
  }
};

document.getElementById("add-one").addEventListener("click", e => {
  counter++;
  let displayMessage = counter;
  counterElement.className = "";
  
  if (typeof messagesList[counter] !== "undefined") {
    const messageObject = messagesList[counter];
    
    if (typeof messageObject.alertText !== "undefined") {
      alert(messageObject.alertText);
    }
    
    if (typeof messageObject.cssClass !== "undefined") {
      counterElement.className = messageObject.cssClass;
    }
    
    if (typeof messageObject.message !== "undefined") {
      displayMessage += " " + messageObject.message;
    }
  }
  
  counterElement.textContent = displayMessage;
});

.keep-going {
  color: green;
}

.stop {
  color: red;
}

<button type="button" id="add-one">Add One To Counter</button>
<p>Counter: <output id="counter">0</output></p>

Answer 12

let counter = 0;
const counterElement = document.getElementById("counter");

const messagesList = {
  10: {
    alertText: "Hello"
  },
  20: {
    cssClass: "keep-going",
    message: "Keep Going"
  },
  30: {
    cssClass: "stop",
    message: "Stop !!"
  }
};

document.getElementById("add-one").addEventListener("click", e => {
  counter++;
  let displayMessage = counter;
  counterElement.className = "";
  
  if (typeof messagesList[counter] !== "undefined") {
    const messageObject = messagesList[counter];
    
    if (typeof messageObject.alertText !== "undefined") {
      alert(messageObject.alertText);
    }
    
    if (typeof messageObject.cssClass !== "undefined") {
      counterElement.className = messageObject.cssClass;
    }
    
    if (typeof messageObject.message !== "undefined") {
      displayMessage += " " + messageObject.message;
    }
  }
  
  counterElement.textContent = displayMessage;
});

.keep-going {
  color: green;
}

.stop {
  color: red;
}

<button type="button" id="add-one">Add One To Counter</button>
<p>Counter: <output id="counter">0</output></p>

Show the text based on the current count of the counter

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Using JavaScript onChange event with ModelChoiceField arguments

The process of filtering a model stops at the third character and results in an empty output

Tips for sharing a post with an image through the addThis plugin in jQuery

Displaying JSON keys and values individually on an HTML page

Color of the border to be applied on only a

I am having trouble getting Vue.js to function properly within HTML when using Django. Can someone please lend me a

The highest and lowest points of the visible image within a transparent PNG file

How can I disable a checkbox in AngularJS?

Application unable to save data to file with no indication in error logs

Is it possible to invoke a Java Script function from a GridView using `<% Eval("") %>` as a parameter for the function?

Why is Jasmine throwing an error when I try to use getElementsByTagName(...)?

Error: Attempting to access 'map' property of an undefined variable in NEXTJS

How is the script type "text/html" utilized in contemporary applications? Is this specific example regarded as effective usage?

Tips for verifying whether a variable is a node?

Search Box in Motion

Creating a dynamic search bar with multiple input fields in HTML

Activate the current page link in materializecss pagination

The universal CSS variables of Material UI

Manipulate JQuery plug-in properties within an AJAX request using MVC

What is the functionality of array equals useState declarations in JavaScript?