Question

我所有的事件都起作用，直到我在.js文件的底部添加addeventlistener为止。我是编程和尝试了解addeventlistener的新手，即使我遵循youtube教程，它们也无法正常工作，所以我现在很茫然。

我一直在观看Nazmus，即使这种键入addeventlistener的格式也无法触发。另外，当我注释掉除addeventlistener之外的所有事件时，它也不会触发。

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>

Answer 1

所有（标准）函数的参数列表都需要在函数名称后的括号内，即使该函数不接受任何参数（在这种情况下，括号应为空()）。使用

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>

箭头函数一旦到达它们，就会有一个例外：如果箭头函数只有一个参数，则可以省略括号：

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

但是，否则，当参数为零或2+时，总是需要括号。

一旦将addeventlistener添加到代码中，我的onclick / mouse over事件均不会触发

1 个答案: