CODEWITHSUNDEEP
javascriptaddeventlistener
Salvatore DePalma
Salvatore DePalma

Reputation: 39

None of my onclick/mouse over events fire once I add an addeventlistener to my code

All of my events work until I add the addeventlistener at the bottom of my .js file. I'm new to programming and trying to understand addeventlisteners, and even when I follow youtube tutorials they aren't working, so I'm at a loss right now.

I've been watching Nazmus and even this format of typing an addeventlistener nothing fires. Also, when I comment out all of my events except for the addeventlistener it also isn't firing.

Javascript & HTML:

document.getElementById(firstp)
firstp.onmouseover = function () {
firstp.innerHTML = "Oops."
}

document.getElementById("name").onclick = function (){
  var name = prompt("Enter your name");
    document.getElementById("outputName").innerText = name;
}

document.getElementById("city").onclick = function (){
  var city = prompt("Enter your city");
    document.getElementById("outputCity").innerText = city;
}

document.getElementById("changeGreen").onclick = function () {
  document.getElementById("outputName").style.color = 'green';
    document.getElementById("outputCity").style.color = 'green';
}

document.getElementById("changeRed").onclick = function () {
  document.getElementById("outputName").style.color = 'red';
    document.getElementById("outputCity").style.color = 'red'; 
}

let addEvent1 = document.getElementById("addEvent1");
addEvent1.addEventListener("click",alertFunction);
function alertFunction {
    alert("Hello!");
}
<DOCTYPE! html>
<html>
    <head>
        <title>longin</title>
        <link rel=stylesheet href="login.css" type="text/css">
    </head>
    
    <body>
        <p id="firstp">This is a paragraph</p>

    <button id="name">Name</button> <br>
    <button id="city">City</button> <br>
    <button id="changeGreen">Change Font Color Green</button> <br>
    <button id="changeRed">Change Font Color Red</button>
    
    <p> Your name is <span id = "outputName"></span></p>
  <P>The city in which you live: <span id = "outputCity"></span></P>
    <button id ="addEvent1"> Add event listener Button 1</button>
    <button id ="addEvent2"> Add event listener Button 2</button>
    <button id ="addEvent3"> Add event listener Button 3</button>
          <script src="login.js"></script>
    </body>
</html>

Upvotes: 1

Views: 57

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370729

All (standard) functions need their argument list enclosed in parentheses after the function name, even when the function doesn't accept any arguments (in which case the parentheses should be empty ()). Use

function alertFunction() {
  alert("Hello!");
}


document.getElementById(firstp)
firstp.onmouseover = function () {
firstp.innerHTML = "Oops."
}

document.getElementById("name").onclick = function (){
  var name = prompt("Enter your name");
    document.getElementById("outputName").innerText = name;
}

document.getElementById("city").onclick = function (){
  var city = prompt("Enter your city");
    document.getElementById("outputCity").innerText = city;
}

document.getElementById("changeGreen").onclick = function () {
  document.getElementById("outputName").style.color = 'green';
    document.getElementById("outputCity").style.color = 'green';
}

document.getElementById("changeRed").onclick = function () {
  document.getElementById("outputName").style.color = 'red';
    document.getElementById("outputCity").style.color = 'red'; 
}

let addEvent1 = document.getElementById("addEvent1");
addEvent1.addEventListener("click",alertFunction);
function alertFunction() {
    alert("Hello!");
}
<DOCTYPE! html>
<html>
    <head>
        <title>longin</title>
        <link rel=stylesheet href="login.css" type="text/css">
    </head>
    
    <body>
        <p id="firstp">This is a paragraph</p>

    <button id="name">Name</button> <br>
    <button id="city">City</button> <br>
    <button id="changeGreen">Change Font Color Green</button> <br>
    <button id="changeRed">Change Font Color Red</button>
    
    <p> Your name is <span id = "outputName"></span></p>
  <P>The city in which you live: <span id = "outputCity"></span></P>
    <button id ="addEvent1"> Add event listener Button 1</button>
    <button id ="addEvent2"> Add event listener Button 2</button>
    <button id ="addEvent3"> Add event listener Button 3</button>
          <script src="login.js"></script>
    </body>
</html>

Arrow functions, once you get to them, have one exception to that rule: if there's only a single argument to the arrow function, the parentheses may be omitted:

const someFn = arg => {
  console.log('someFn running with arg ' + arg);
};
someFn();

But otherwise, when you have zero or 2+ arguments, you always need parentheses.

Upvotes: 1

Related Questions