javascript动态更改图像src的位置 - 没有JQuery

Question

我有几个页面以相同的方式设置。每个页面大约有 10 到 15 张图像，如果单击它们，图像会发生变化并变得无法单击。 我的代码是：

function ToggleOnclick(elID)
{
var el = document.getElementById(elID);
var loc = document.getElementsByClassName("wrapper");

if (el.onclick)
{
        // Disable the onclick
        el._onclick = el.onclick;
        el.onclick = null;
        el.src = loc.id + "/" + el.name + "Clicked.png";
}
}

图片的html是：

  ....
  <div class="content">
   <div class="wrapper" id="som">
   <div class="img0"><img src="som/doos.png" alt="doos" name="doos" id="doos" onclick="ToggleOnclick(this.name);" /></div>
   <div class="img1"><img src="som/beer.png" alt="beer" name="beer" id="beer" onclick="ToggleOnclick(this.name);" /></div>
   <div class="img2"><img src="som/bel.png" alt="bel" name="bel" id="bel" onclick="ToggleOnclick(this.name);" /></div>
   ....

因为我需要制作大约 20 个 html 文件，所以我想将图像的源位置添加为 wrapper-div 的 id-tag。

我对 javascript 知之甚少，我很难找到我想要的东西。也可能是因为不是母语人士，也不知道我在寻找什么。

请记住我的文件：

1. 由于我们客户的规格，必须在较旧的浏览器版本中工作
2. 无法用 JQuery 修复（请不要在 cmets 或答案中讨论。我不能在这个项目中使用它。不讨论。）

tldr;我需要一种方法来根据 wrapper-div 的 id-tag 设置 img src

Answer 1

getElementsByClassName 给出的集合不是单个元素

将元素传递给ToggleOnclick，这样您就不必在函数中获取它

function ToggleOnclick(el)
{
//var loc = document.getElementsByClassName("wrapper")[0];//assuming there is only one wrapper
if (el.onclick)
{
        // Disable the onclick
        el._onclick = el.onclick;
        el.onclick = null;
        //el.src = loc.id + "/" + el.name + "Clicked.png";
        el.src = el.src.replace(".png", "Clicked.png");
}
}
<img src="som/doos.png" alt="doos" name="doos" id="doos" onclick="ToggleOnclick(this);" />