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

Question

这是我的 HTML 和 Javascript，我决定不包括我的 CSS，因为我认为不需要。我的代码的目的是创建一个切换开关（如设置应用程序中的 iPhone 设置），然后使用 javascript 添加事件侦听器。我让 Listener 应用于按钮元素。当我单击按钮时，函数 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();

Answer 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>

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

How to change the background with javascript using an event listener

html

javascript

events

event-listener