文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >我的JavaScript出了什么问题？函数不工作

问我的JavaScript出了什么问题？函数不工作
EN

Stack Overflow用户
提问于 2017-04-03 02:07:26
回答 3查看 30关注 0票数 0

我正在尝试获取它，这样当我点击一个框时，它就会变成黑色。

​

代码语言：javascript
复制
function colorize() {
  document.getElementsByClassName('boardpic').innerHTML.src = "images/black.png";
}
代码语言：javascript
复制
body{
  font-family: 'Raleway', sans-serif;
  margin: 0;
  background: #87e0fd;
  background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 74%, #05abe0 100%);
  background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 74%,#05abe0 100%);
  background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 74%,#05abe0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );
}

#title{
  text-align: center;
  font-size: 96px;
  margin-bottom: 12px;
}

.boardpic{
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
}

#container{
  display: flex;
}

#board{
  border-color: black;
  border-width: 3px;
  border-radius: 3px;
  border-style: solid;
  background-color: white;
  padding: 3px;
  width: 512px;
  height: 512px;
  font-size: 0;
  margin: auto;
  margin-bottom: 12px;
}

#colorpicker{
  font-size: 0;
  border-color: black;
  border-width: 3px;
  border-radius: 3px;
  border-style: solid;
  width: 256px;
  margin: auto;
}
代码语言：javascript
复制
<html>
  <head>
    <title>
      Drawify | 0.0.1
    </title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet">
  </head>
  <body>
    <h1 id="title">
      Drawify
    </h1>
    <div id="container">
      <div id="board">
        <div class="line">
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
          <img class="boardpic" src="images/white.png" onclick="colorize()" />
        </div>
      </div>
    </div>
    <div id="colorpicker">
      <div class="colorpickerline">
        <img src="images/red.png" />
        <img src="images/orange.png" />
        <img src="images/yellow.png" />
        <img src="images/green.png" />
        <img src="images/blue.png" />
        <img src="images/purple.png" />
        <img src="images/white.png" />
        <img src="images/black.png" />
      </div>
    </div>
    <script src="code.js">
    </script>
  </body>
</html>

每当我单击时，框都不会改变

​

我很确定我的设置是正确的，但我猜不是。所以，是的，我对编码很陌生，所以请用简单的术语来解释。:)

javascript
html
EN

回答 3

Stack Overflow用户

发布于 2017-04-03 02:10:17

像这样编写你的函数：

代码语言：javascript
复制
function colorize(element) {
  element.src = "images/black.png";
}

然后作为onclick事件添加以下内容：

代码语言：javascript
复制
<img class="boardpic" src="images/white.png" onclick="colorize(this)" />

要更改的每个img元素，请单击。

票数 0
EN

Stack Overflow用户

发布于 2017-04-03 02:10:31

将this作为参数传递或使用event.target获取单击的元素！

getElementsByClassName返回类似于集合的数组，因此您不能直接对其应用DOM方法，需要迭代集合。

innerHTML.src也是无效语法，innerHTML返回String！

​

代码语言：javascript
复制
function colorize(e) {
  e = e || window.event;
  e.target.src = "images/black.png";
}
代码语言：javascript
复制
body {
  font-family: 'Raleway', sans-serif;
  margin: 0;
  background: #87e0fd;
  background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 74%, #05abe0 100%);
  background: -webkit-linear-gradient(top, #87e0fd 0%, #53cbf1 74%, #05abe0 100%);
  background: linear-gradient(to bottom, #87e0fd 0%, #53cbf1 74%, #05abe0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0', GradientType=0);
}

#title {
  text-align: center;
  font-size: 96px;
  margin-bottom: 12px;
}

.boardpic {
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
}

#container {
  display: flex;
}

#board {
  border-color: black;
  border-width: 3px;
  border-radius: 3px;
  border-style: solid;
  background-color: white;
  padding: 3px;
  width: 512px;
  height: 512px;
  font-size: 0;
  margin: auto;
  margin-bottom: 12px;
}

#colorpicker {
  font-size: 0;
  border-color: black;
  border-width: 3px;
  border-radius: 3px;
  border-style: solid;
  width: 256px;
  margin: auto;
}
代码语言：javascript
复制
<html>

<head>
  <title>
    Drawify | 0.0.1
  </title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet">
</head>

<body>
  <h1 id="title">
    Drawify
  </h1>
  <div id="container">
    <div id="board">
      <div class="line">
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
      </div>
      <div class="line">
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
      </div>
      <div class="line">
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
      </div>
      <div class="line">
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
      </div>
      <div class="line">
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
      </div>
      <div class="line">
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
      </div>
      <div class="line">
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
      </div>
      <div class="line">
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
      </div>
      <div class="line">
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
      </div>
      <div class="line">
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
      </div>
      <div class="line">
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
      </div>
      <div class="line">
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
      </div>
      <div class="line">
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
      </div>
      <div class="line">
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
      </div>
      <div class="line">
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
      </div>
      <div class="line">
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
        <img class="boardpic" src="images/white.png" onclick="colorize()" />
      </div>
    </div>
  </div>
  <div id="colorpicker">
    <div class="colorpickerline">
      <img src="images/red.png" />
      <img src="images/orange.png" />
      <img src="images/yellow.png" />
      <img src="images/green.png" />
      <img src="images/blue.png" />
      <img src="images/purple.png" />
      <img src="images/white.png" />
      <img src="images/black.png" />
    </div>
  </div>
  <script src="code.js">
  </script>
</body>

</html>

​

票数 0
EN

Stack Overflow用户

发布于 2017-04-03 02:13:32

将函数绑定到DOM中的每个元素是无效的，而且看起来很混乱。我建议你用boardpic类捕获每个元素，只绑定事件侦听器，它会改变被点击元素的src属性。

​

代码语言：javascript
复制
var elems = document.getElementsByClassName('boardpic');
Array.from(elems).forEach(v => v.addEventListener('click', function() {
  this.src = 'https://placehold.it/350x150';
}));
代码语言：javascript
复制
body {
  font-family: 'Raleway', sans-serif;
  margin: 0;
  background: #87e0fd;
  background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 74%, #05abe0 100%);
  background: -webkit-linear-gradient(top, #87e0fd 0%, #53cbf1 74%, #05abe0 100%);
  background: linear-gradient(to bottom, #87e0fd 0%, #53cbf1 74%, #05abe0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0', GradientType=0);
}

#title {
  text-align: center;
  font-size: 96px;
  margin-bottom: 12px;
}

.boardpic {
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
}

#container {
  display: flex;
}

#board {
  border-color: black;
  border-width: 3px;
  border-radius: 3px;
  border-style: solid;
  background-color: white;
  padding: 3px;
  width: 512px;
  height: 512px;
  font-size: 0;
  margin: auto;
  margin-bottom: 12px;
}

#colorpicker {
  font-size: 0;
  border-color: black;
  border-width: 3px;
  border-radius: 3px;
  border-style: solid;
  width: 256px;
  margin: auto;
}
代码语言：javascript
复制
<h1 id="title">
  Drawify
</h1>
<div id="container">
  <div id="board">
    <div class="line">
      <img class="boardpic" src="images/white.png" />
      <img class="boardpic" src="images/white.png" />
      <img class="boardpic" src="images/white.png" />
      <img class="boardpic" src="images/white.png" />
      <img class="boardpic" src="images/white.png" />
      <img class="boardpic" src="images/white.png" />
    </div>
  </div>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/43171728

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档