javascript - 单击时使用 Javascript 更改 CSS 颜色(addEventListener)

标签 javascript css

好的,我有了这个 div,我希望它在我点击它时变成红色。最初它应该显示为黑色。如果您接受并测试此代码,您会发现它在您加载页面后立即变为红色。

如果我去掉 click1 函数的参数,它就可以正常工作...... 它最初仍然不会是黑色的,但是当你点击它时它至少会变成红色。

我在 click1 上有一个参数,以便将来节省代码行数。 因为最终这段代码是为了处理多个方 block 。 我希望能够使用 JavaScript 更改方 block 的颜色。我需要它能够区分每个方 block 。这样它只会更改您单击的正方形的颜色。 我不想为每个方 block 都创建一个新函数。 这就是我按照自己的方式设置它的原因。

所有 HTML、CSS 和 Javascript 都在这里。 (预先感谢大家。被代码困住和沮丧并不好玩。我不知道没有这个社区我会做什么。我只希望我能做出尽可能多的贡献。)

<body>
  <div class="border">
    <div id="box1" style="width: 100px;	height: 100px; backgroundColor: #000000;">
    </div>
  </div>
  <script type="text/javascript">
    var colorcheck = "#cccccc";

    function click1(blockid) {
      document.getElementById("box" + blockid).style.backgroundColor = '#ff0000';
      colorcheck = document.getElementById("box1").style.backgroundColor;
      console.log(colorcheck);
      console.log("box" + blockid);
    };

    document.getElementById("box1").addEventListener("click", click1(1));
  </script>
</body>

最佳答案

如果你想在 addEventListener 中传递参数,你必须像下面这样修改你的代码。

 document.getElementById("box1").addEventListener("click", function(){click1(1);}, false);

DEMO

关于javascript - 单击时使用 Javascript 更改 CSS 颜色(addEventListener),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34737602/

相关文章:

javascript - 如何找到在可放置的 div 上放置的 div 的索引

html - 如何使标题中的褪色线响应?

html - 我的 CSS3 的间距/宽度问题

css - 如何为 openshift 模板使用 FontAwesome 图标

javascript - 如何在 typescript 中使用带有变量的可选链接运算符

javascript - Angular UI-Grid 自定义过滤器按钮

javascript - RAILS/Ruby 错误 "CALL_AND_RETRY_0: Allocation failed - process out of memory"

javascript - HTML - 如何在使用 jQuery Mobile css 时做一个方形的普通按钮

c# - 在数组中使用命名键 C# MVC razor

javascript - 如何在添加新 block 时使我的搜索栏保持静止