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>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 "="
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>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>