Question

我试图得到它，以便当我点击一个方框时，它会变黑。

function colorize() {
  document.getElementsByClassName('boardpic').innerHTML.src = "images/black.png";
}

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;
}

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

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

我很确定我正在设置它，但我猜不是。所以是的，我对编码很新，所以请用简单的术语解释。：）

Answer 1

像这样编写你的函数：

function colorize(element) {
  element.src = "images/black.png";
}

然后作为onclick事件添加：

<img class="boardpic" src="images/white.png" onclick="colorize(this)" />

到想要在点击时更改的每个img元素。

Answer 2

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

getElementsByClassName返回像集合一样的数组，因此你不能直接在它上面应用DOM方法，需要迭代收集。

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

＆＃13;

function colorize(e) {
  e = e || window.event;
  e.target.src = "images/black.png";
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

将函数绑定到DOM内的每个元素是不有效的，看起来很混乱。我建议你用boardpic类来捕获每个元素，然后绑定事件监听器，它改变了clicked元素的src属性。

＆＃13;

var elems = document.getElementsByClassName('boardpic');
Array.from(elems).forEach(v => v.addEventListener('click', function() {
  this.src = 'https://placehold.it/350x150';
}));

＆＃13;

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;
}

＆＃13;

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

＆＃13;

我的JavaScript出了什么问题？功能不起作用

3 个答案: