如何使用事件侦听器使用 javascript 更改背景答案

【问题标题】：How to change the background with javascript using an event listener如何使用事件侦听器使用 javascript 更改背景
【发布时间】：2018-08-21 05:11:09
【问题描述】：

这是我的 HTML 和 Javascript，我决定不包含我的 CSS，因为我认为它不需要。我的代码的目的是创建一个切换开关（如设置应用程序中的 iPhone 设置），然后使用 javascript 添加事件侦听器。我让监听器应用于按钮元素。当我单击按钮时，函数 start() 应该激活，如您所见，切换函数应该在 onclick 事件启动时激活。按下按钮时应该改变背景颜色。但是，它根本不会改变颜色。就像切换调用不起作用。我可以单独调用切换功能，但这会在页面加载时改变颜色。当我单击按钮时，它应该可以工作。感谢任何可以帮助我的人。

<!DOCTYPE html>
<html>

<head>
  <title>Light Switch</title>
  <link rel="stylesheet" href="light.css" />
</head>

<body id="body">

  <button id="submit">Submit
    <label id="switch">
      <input type="checkbox" checked>
      <span class="slider"></span>
    </label>
  </button>
  <script src="light.js"></script>

</body>
</html>


//This js file was separate from my HTML file and was linked

function start() {
  var submit = document.getElementById("submit");
  submit.addEventListener("onclick", toggle);
};

function toggle() {
  var color = document.getElementById("body");
  color.style.backgroundColor = "black";
};

start();

【问题讨论】：

事件名称是“click”，而不是“onclick”。
感谢回复，我知道onclick也是一个事件。我的编程老师告诉我们使用 onclick。在 devtools 窗口中，它显示添加了 onclick 事件。我会尝试点击事件，看看是否有影响。
Your programming instructor is wrong;这是“点击”。
他在谈论 HTML 中的 onclick 事件。但这在 JavaScript 中是行不通的，相当于 onclick 的就是 click。

标签： javascript html events event-listener

【解决方案1】：

将onclick 更改为仅click。在这种情况下似乎不需要start() 函数。

document.getElementById("submit").addEventListener("click", toggle);


function toggle() {
  console.log('c')
  document.getElementById("body").style.backgroundColor = "black";
};

<body id="body">
  <button id="submit">Submit
    <label id="switch">
      <input type="checkbox" checked>
      <span class="slider"></span>
    </label>
  </button>
</body>

也可以使用onclick，你不需要addEventListener

var getSubmitButton = document.getElementById("submit");
getSubmitButton.onclick = toggle;

function toggle() {
  document.getElementById("body").style.backgroundColor = "black";
};

<body id="body">
  <button id="submit">Submit
    <label id="switch">
      <input type="checkbox" checked>
      <span class="slider"></span>
    </label>
  </button>
</body>

【讨论】：

我将 onclick 更改为 click 并且确实有效。我不明白为什么我的网络编程讲师告诉我们使用 onclick。但是谢谢你的帮助。 onclick 有什么方法可以工作吗？我知道这是事件，我之前用它来启动我用 javascript 编写的游戏
该死，我运气不好，这是我的导师第一年的教学，它显示了大声笑。他和我聊了 30 分钟，他想不通。
@programming__God，如果这个答案对你有帮助，请点击勾选标记接受它作为答案。我会向你表示感谢