How Can I Display Different Text Everytime I Click a Button?

1

If I have a button, how can I make it so when I press it once it displays certain text, but when I press it 2 times it displays a different text,
EX:
1: Why are you clicking me?
2: Stop
3: Come On Man!
4: PLEASE!
5: Fine I Give Up
6:
7:
8:
9: You are still here??!??!?

2

You can have an array of strings that you index into and set the click targets textContent, incrementing the index for each button click and resetting it when you have run out of strings.

Quick example
https://jsfiddle.net/p2yxsbfa/

3 
<!DOCTYPE html>
<html>
<head>
<script>
const button = document.getElementById('button');
const stringsArray = ['Why are you clicking me?', 'Stop', 'Come on man', 'PLEASE!'];
let index = 0;

button.addEventListener('click', (event) => {
  if (index > 3) {
    index = 0;
  }
  document.getElementById("output").innerHTML += stringsArray[index];
  index++
})
</script>
</head>
<body>
<button id="button">
Don't click me!
</button>
<div id="output"></div>
</body>
</html>

Why would this version not work?
No links yet

4

What are you asking?

5

It is code but it compressed for some reason…
Fixed

6

I mean it works, but you are concatenating the strings. You can just remove the + from the assignment.

document.getElementById("output").innerHTML = stringsArray[index];

7
  1. It does not work for me. Put it into an editor or something.
  2. I had the + becauseI want the text to add on under it. So all outputs display at once as they are revealed
8

It is because you have the script before the HTML. You can not get to the HTML in the script before it has loaded.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <button id="button">
      Don't click me!
    </button>
    <div id="output"></div>


    <script>
      const button = document.getElementById('button');
      const stringsArray = ['Why are you clicking me?', 'Stop', 'Come on man', 'PLEASE!'];
      let index = 0;

      button.addEventListener('click', (event) => {
        if (index > 3) {
          index = 0;
        }
        document.getElementById("output").innerHTML += stringsArray[index];
        index++
      })

    </script>
  </body>

</html>
9

I got it to work a different way, but this works too! Thanks!