Eventlistener

[Growly]

Whenever I click on the place I assigned it to be, it only does 1 of the three text content. How do I make it where I can keep clicking infinite amount of times instead of just one time?

[m_hutley]

x = 1
x = 2
x = 3

echo x

What comes out?

---

okay, so… what is the behavior you’re expecting?

[Growly]

I don’t get your point. So there isn’t a method then?

[Paul_Wilkins]

There quite likely is a method, but what do you want to achieve. More details please are needed from you, for us to supply you with a suitable answer.

You know in your own head what you want to achieve, but that doesn’t help us to understand what you already know. Please reveal to us what you want to achieve.

[DaveMaxwell]

You want all that text to show? You need to concatenate the strings. You’re reassigning the value everytime.

// concatenate
let teststring = "abc";
teststring += "def";
teststring += "ghi";

document.getElementById("d1").innerHTML = teststring;

// replace
teststring = "abc";
teststring = "def";
teststring = "ghi";
document.getElementById("d2").innerHTML = teststring;

[PaulOB]

Maybe it was something like a different fact being output each time

or:

(As usual my JS code is probably not the best way to do this. )

@Growly please clarify your question if none of the above are what you are after.

[rpg_digital]

Beat me to it Paul,

window.addEventListener('DOMContentLoaded', function() {
  // imported facts
  const facts = [
    "This is fact 1",
    "This is fact 2",
    "This is fact 3",
    "This is fact 4",
    "This is fact 5",
    "This is fact 6"
  ]
  
  const btn = document.querySelector("#fact-button");
  const factsDisplayElem = document.querySelector("#facts");
  
  let i = 0;
  
  const handleFacts = function (event) {
    factsDisplayElem.textContent = facts[i++] || 'No more Facts !!'; // || <-- or
  }
  
  btn.addEventListener("click", handleFacts);
})

Edit:

I know I probably shouldn’t! Possibly a bit of OCD, but that let i = 0 hanging around out there was bugging me. If you call the values method on an array it returns an array iterator object.

window.addEventListener('DOMContentLoaded', function() {
  // imported facts
  const facts = [
    "This is fact 1",
    "This is fact 2",
    "This is fact 3",
    "This is fact 4",
    "This is fact 5",
    "This is fact 6"
  ].values() // returns an Array iterator object.
  
  const btn = document.querySelector("#fact-button");
  const factsDisplayElem = document.querySelector("#facts");
  
  const handleFacts = function (event) {
    const fact = facts.next()

    factsDisplayElem.textContent = (fact.done) ? 'No more Facts !!' : fact.value;
  }
  
  btn.addEventListener("click", handleFacts);
})

Thought it might be of interest.

[PaulOB]

@rpg_digital

Beat me to it Paul,

Yours is neater

[Growly]

I will try: I want the text to change every time I click on the text in the website, but as of right now when I click on the text, it only allows me to click it once to change the text; not a lot of times.

How do I take off the restriction of only being able to click it once?

@PaulOB

[PaulOB]

@Growly

How do I take off the restriction of only being able to click it once?

@PaulOB

I’m not quite sure of your requirements as at the minute (in my demo) you can click on the button as many times as you like but it only shows each messages once but shows all messages.

You could just make it repeat and show the messages again.

e.g.

Or perhaps like this:

You will need to clarify a little more as to what you require and what you expect to happen as details are important

[Growly]

Bruh, I hadn’t seen your codepen.
That’s exactly what I need.