Question

我的问题是，我正在尝试制作一个记分牌，其中包含5张星星图像，当用户得到正确的问题时，这些图像会变亮。这是包含5个图像的类。我尝试给每个人一个ID，但我仍然无法弄清楚。

<div class="image_line" >
    <div class="image_cell" id="1">
        <img src ="StarOff.gif" />
    </div>
    <div class="image_cell" id="2">
        <img src ="StarOff.gif" />
    </div>
    <div class="image_cell" id="3">
        <img src ="StarOff.gif" />
    </div>
    <div class="image_cell" id="4">
        <img src ="StarOff.gif" />
    </div>
    <div class="image_cell" id="5">
        <img src ="StarOff.gif" />
    </div>

</div>

这是我试图用来更改图片的javascript。然而，我所拥有的是一个名为corret_answers的变量，它将用于根据其ID更改每个图像，因此当用户有1个正确答案时，correct_answers = 1然后使用它来更改图像，因为图像都具有ID＆＃39; 1-5的s与此增量变量匹配

document.getElementById("1").src = "StarOn.gif";

Here is an image to show you a little of what it looks like

Answer 1

您正在更改src的{{1}}属性，该属性不存在。您要做的是访问其子节点（<div class="image_cell" id="1">）：

<img>

Answer 2

您已将id分配给div标记，但您需要将id分配给img标记。然后你应该得到对图像的引用，然后可以改变它的src：

<div class="image_cell"> <img src ="StarOff.gif" id="1"/> </div>

Answer 3

jsFiddle：https://jsfiddle.net/CanvasCode/z1fru5f0/

你需要为你的img标签分配id而不是div，如果你为div分配id，那么你需要检查它的childNodes。

HTML

<div class="image_line" >
    <div class="image_cell">
        <img id="1" src ="http://www.gamingevolution.info/screenshots/main.php/d/149898-1/Greystar.gif" />
    </div>
    <div class="image_cell">
        <img id="2" src ="http://www.gamingevolution.info/screenshots/main.php/d/149898-1/Greystar.gif" />
    </div>
    <div class="image_cell">
        <img id="3" src ="http://www.gamingevolution.info/screenshots/main.php/d/149898-1/Greystar.gif" />
    </div>
    <div id="4" class="image_cell">
        <img src ="http://www.gamingevolution.info/screenshots/main.php/d/149898-1/Greystar.gif" />
    </div>
    <div id="5" class="image_cell">
        <img src ="http://www.gamingevolution.info/screenshots/main.php/d/149898-1/Greystar.gif" />
    </div>

</div>

的javascript

var start1 = document.getElementById("1")
start1.src = "https://www.fortwhyte.org/wp-content/uploads/2014/08/gold_star.png";

Answer 4

我注意到correct_answer是一个数字，因此我将其转换为字符串（使用toString），因此可用于匹配.image_cell id。我添加了一个input来证明它实际上是函数。

请参阅代码段

var correct_answer = 0;

function starOn(correct_answer) {
  var x = correct_answer.toString();
  var iCell = document.getElementById(x);
  var iStar = iCell.querySelector('img');
  iStar.src = "http://findicons.com/files/icons/249/xmas_pack/48/star.png";
}

.image_cell {
  display: inline-block;
}
input {
  width: 48px;
  text-align: center;
}

<div class="image_line">
  <div class="image_cell" id="1">
    <img src="https://cdn0.iconfinder.com/data/icons/super-mono-basic/yellow/star_basic_yellow.png" />
  </div>
  <div class="image_cell" id="2">
    <img src="https://cdn0.iconfinder.com/data/icons/super-mono-basic/yellow/star_basic_yellow.png" />
  </div>
  <div class="image_cell" id="3">
    <img src="https://cdn0.iconfinder.com/data/icons/super-mono-basic/yellow/star_basic_yellow.png" />
  </div>
  <div class="image_cell" id="4">
    <img src="https://cdn0.iconfinder.com/data/icons/super-mono-basic/yellow/star_basic_yellow.png" />
  </div>
  <div class="image_cell" id="5">
    <img src="https://cdn0.iconfinder.com/data/icons/super-mono-basic/yellow/star_basic_yellow.png" />
  </div>

</div>
<br/>
<label>Type in a number 1 to 5</label>
<input oninput="starOn(this.value);">

在类中更改div中的图像

4 个答案: