如何使用事件監聽器使用JavaScript更改背景

Question

這是我的HTML和Javascript，我決定不包括CSS，因為認為不需要它。 我的代碼的目的是創建一個切換開關（例如settings應用程序中的iPhone設置），然后使用javascript添加事件監聽器。 我使監聽器應用於button元素。 當我單擊按鈕時，函數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更改背景

問題描述

1 個解決方案

解決方案1
1 已采納 2018-03-13 03:28:27

如何使用事件監聽器使用JavaScript更改背景

問題描述

1 個解決方案

解決方案1 1 已采納 2018-03-13 03:28:27

解決方案1
1 已采納 2018-03-13 03:28:27