代码之家 › 专栏 › 技术社区 › inDepth

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

event-listener events html javascript

inDepth · 技术社区 · 7 年前

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

<!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();

1 回复 | 直到 7 年前

brk 7 年前

改变 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";
};

<正文id=“正文”>
<按钮id=“提交”>提交
<标签id=“开关”>
<已选中输入类型=“checkbox”>
<span class=“slider”></跨度(>);
</标签(>);
</按钮(>);
</车身(>);

推荐文章

Noah Leuthold · 为什么事件侦听器中的变量更改不会影响函数中的if语句

2 年前

MrFireFerid · 仅接受特定电子邮件地址的自定义表单FOSUserBundle 2.0/Symfony3

7 年前

user8293395 · 激活事件侦听器时删除事件侦听器

7 年前

Eric Theofanis · 删除循环javascript内部的事件侦听器

7 年前

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

7 年前

amacdonald · JAVASCRIPT:尝试在自定义事件调度程序上创建hasCallbackFor函数

7 年前

Y4roc · Symfony事件侦听器

7 年前

Catly Law · Firebase子事件侦听器到最后一个节点的每个子节点

7 年前

Chad Andersen · 点击记忆游戏的第一张牌时启动计时器

7 年前

Mike Casan Ballester · 如何为委托选择器和直接选择器编写较短的事件?

7 年前