" change onclick content " in javascript function every single click

Question

hi there i just wanna make the button on html when it clicking,the result of content from each function could be change with each name of function.but in this my code,it doesnt change unfortunately.and just appears result from function 3,and when i click second and third and this doesnt changed at all.

<!DOCTYPE html>
<html>
<body>

<h1>HTML DOM Events</h1>
<h2>The onclick Event</h2>

<p>The onclick event triggers a function when an element is clicked on.</p>
<p>Click to trigger a function that will output "Hello World":</p>

<button onclick="myFunction(),myFunction2(),myFunction3()">Click me</button>

<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
function myFunction2() {
  document.getElementById("demo").innerHTML = "Hello lllo";
}
function myFunction3() {
  document.getElementById("demo").innerHTML = "Hello ok";
}
</script>

</body>
</html>

all functions update the same element, so of course you can only see the last one - what did you want to happen instead? you could always use `+=` instead of `=` to concatenate to the innerHTML — Bravo, Jun 25 '22 at 10:41
`when i click second and third` - you only have one button to click, there is no second or third button ... but if you mean clicking that button a second or third time ... it does the same thing every click ... all three functions — Bravo, Jun 25 '22 at 10:44

score 0 · Answer 1 · answered Jun 25 '22 at 10:51

If you want to execute all the three function with click event, you need to use AddEventListener for click event instead of native click event

<!DOCTYPE html>
<html>
<body>

<h1>HTML DOM Events</h1>
<h2>The onclick Event</h2>

<p>The onclick event triggers a function when an element is clicked on.</p>
<p>Click to trigger a function that will output "Hello World":</p>

<button id="button">Click me</button>

<p id="demo"></p>

<script>

const button = document.getElementById('button');

button.addEventListener('click', myFunction)
button.addEventListener('click', myFunction2)
button.addEventListener('click', myFunction3)

function myFunction() {
  document.getElementById("demo").innerText += "Hello World";
}
function myFunction2() {
  document.getElementById("demo").innerText += "Hello lllo";
}
function myFunction3() {
  document.getElementById("demo").innerText += "Hello ok";
}
</script>

</body>
</html>

Or you add one event listener and execute the three functions inside.

button.addEventListener('click', () => {
  myFunction()
  myFunction2()
  myFunction3()
})

And if you want to concatenate the text with the last value of the inner text of the demo element you need to use "+=" instead of "="

score 0 · Answer 2 · answered Jun 25 '22 at 10:59

As it's very unclear from the question itself what are you trying to achieve, I am just going to assume that you want to trigger function by function. So, function is basically ran one by one... Like this:

<!DOCTYPE html>
<html>
<body>

<h1>HTML DOM Events</h1>
<h2>The onclick Event</h2>

<p>The onclick event triggers a function when an element is clicked on.</p>
<p>Click to trigger a function that will output "Hello World":</p>

<button onclick="alertFirst(), alertSecond()">Click me</button>

<p id="demo"></p>

<script>
var el = document.getElementById('demo');

// create named functions:
//Instead of alert, you will want to set innerhtml, so just change that
function alertFirst() { alert('hello world'); };
function alertSecond() { alert('hello 2 world'); };

// assign functions to the event listeners (recommended):
el.addEventListener('click', alertFirst);
el.addEventListener('click', alertSecond);

// then you could remove either one of the functions using:
el.removeEventListener('click', alertFirst);
el.removeEventListener('click1', alertSecond);
</script>

</body>
</html>

is that really work? ive try on your snippet,but no live. – Megantara Jun 25 '22 at 12:10 — Megantara, Jun 25 '22 at 12:10

KooiInc · Accepted Answer · 2022-06-25T13:49:59.300

It is generally not a good idea to use inline event handlers.

You can use addEventListener to 'listen' to certain events to an element and handle such events. More generic it's possible to use one handler for all elements in a document. The latter is called event delegation.

The snippet demonstrates both strategies.

// single element click event listeners
document.querySelector(`#demoBttn1`).addEventListener(`click`, handleClick);
document.querySelector(`#demoBttn2`).addEventListener(`click`, handleClick2);

// generic (delegated) click event listener
document.addEventListener(`click`, handleAllClicks);

// single element handler (#demoBttn1)
function handleClick(evt) {
  document.querySelector(`#demo`)
    .insertAdjacentHTML(`beforeend`, `<div>Hello Wrld</div>`);
}

// single element handler (#demoBttn2)
function handleClick2(evt) {
  document.querySelector(`#demo`)
    .insertAdjacentHTML(`beforeend`, `<div>Hello you</div>`);
}

// delegate handler
function handleAllClicks(evt) {
  if (evt.target.id.startsWith(`demoAll`)) {
    return document.querySelector(`#demo`)
    .insertAdjacentHTML(`beforeend`, `<div>${
      evt.target.dataset.text2add}</div>`);
  }
  
  if (evt.target.id === `demoCombined`) {
    return document.querySelectorAll(`[data-text2add]`)
      .forEach(bttn => bttn.click());
  }
  
  if (evt.target.id === `clear`) {
    return document.querySelector(`#demo`).textContent = ``;
  }
}

<p>
  <button id="demoBttn1">hello</button>
  <button id="demoBttn2">hello you</button>
  (single button handling)
</p>
<p>
  <!-- the data attribute value will be used
       for the text to add to p#demo -->
  <button id="demoAll1" data-text2add="Hi there">say hi</button>
  <button id="demoAll2" data-text2add="Hello there">say hello</button>
  <button id="demoAll3" data-text2add="Goodbye">say bye</button>
  <button id="demoCombined" >hi, hello and bye</button>
  (delegated)
</p>

<p>
  <button id="clear">clear all</button>
  (delegated)
</p>

<p id="demo"></p>

" change onclick content " in javascript function every single click

3 Answers3