Quantcast
Channel: Internet Explorer Web Development forum
Viewing all articles
Browse latest Browse all 3527

Why will the multiple events I have here using addEventListener() fail to proceed to operate?

$
0
0

I am a beginner and its a lot to take in, I am sure when you first started your journey into this strange and heady world it was intimidating. Therefore all your patience, wealth of experience, guidance and kindness is highly welcomed and greatly appreciated.

Please look at this code. Now I believe I understand that an eventname must be a member of element, therefore the three events listed:  x.addEventListener("(x)", myFunction); x.addEventListener("setMaximum", mySecondFunction); ("popup", myThirdFunction);   are all completely different events from what I understand. All three events must be events that are similar in nature or in element.  For example here are mouseover events, this string of code works perfectly fine:  I show the actual html and external.js code:

<!DOCTYPE html> 
< html> 
< body> 
<head>
< script src="html and .js practice.js">  </script>   </head>
< p>This example uses the addEventListener() method to add many events on the same button.</p>
<button id="myBtn">Try it</button>
<p id="demo4"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
x.addEventListener("setMaximum", myFourthFunction);
</script>
 
< /body>
< /html>

.js script code:

function myFunction() {
    document.getElementById("demo4").innerHTML += "Moused over!<br>";
}

function mySecondFunction() {
    document.getElementById("demo4").innerHTML += "Clicked!<br>";
}

function myThirdFunction() {
    document.getElementById("demo4").innerHTML += "Moused out!<br>";

}

I have grouped a few confirm and alert popup boxes, all of similar and like elements  here are the html and external .js script what could I be possibly doing wrong for the alerts will not fire.

<!DOCTYPE html> 
< html> 
< body> 
<head>
< script src="html and .js practice.js">  </script>   </head>
< p>This example uses the addEventListener() method to add many events on the same button.</p>
<button id="myBtn">Try it</button>
<p id="demo4"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("alert", myFunction);
x.addEventListener("alert", mySecondFunction);
x.addEventListener("alert", myThirdFunction);

< /script>
 
< /body>
< /html>

external .js script

function myFunction() {
    alert("I am an alert box!");
 document.getElementById("demo4").innerHTML += "alert!<br>";}

function mySecondFunction() {
    alert("Hello\nHow are you?");
 document.getElementById("demo4").innerHTML += "alert!<br>";}

function myThirdFunction() {
    var x;
    if (confirm("Press a button!") == true) {
        x = "You pressed OK!";
    } else {
        x = "You pressed Cancel!";
    }
    document.getElementById("demo4").innerHTML += "x!<br>";
}

Please could you make the corrections in code and paste them below so that I may test it on my end. I do appreciate all your assistance, thank you ever so much.


Viewing all articles
Browse latest Browse all 3527

Trending Articles