Question

我是一名网站管理员，我很想知道是否可以通过单击html中的按钮来动态更改img src。

理论目标：我的网页上有4个按钮，每个按钮使用三个功能更改页面上的内容：

指定更改标题
指定更改段落
指定更改表格

我将代码嵌入Weebly网站，因为这是我们之前网站管理员选择的网页寄存。因此，考虑到Weebly有限，这甚至可能无法实现。

您可以看到我当前和完整版的代码：HERE。

可以找到缩短版本：HERE。

我读到我应该使用document.getElementById("").src图片，但我没有运气。我已经能够更新标题和段落，所以这不是太糟糕。我无法更新表格中的任何内容。表格之外的任何内容都可以更新。

我还尝试将ID: "R1C1"分别移动到所有子标记和父标记中，直到我到达根标记。

有什么建议吗？

Answer 1

不熟悉Weebly，所以这可能不适用。

您要更改的图片标记必须包含id属性。然后使用document.getElementById选择该图像标记，并在此之后更改src。

document.getElementById('btnChangeImage').addEventListener('click', changeImage);

function changeImage(){
  var img = document.getElementById('imgChangeMe');
  img.src = 'http://placehold.it/200x50';
}

<button id="btnChangeImage">Change Image</button>

<table>
  <tr>
    <td>Doesn't matter where this image is, you can select it by the ID</td>
    <td><img id="imgChangeMe" src="http://placehold.it/350x150" /></td>
  </tr>
</table>

Answer 2

好吧，所以我能够解决问题。这不是代码的问题，Weebly试图处理代码是一个问题。正如你们许多人提到的那样，将ID放在图像标签中是必须的，正如我之前所希望的那样。所以它看起来像这样

<img id="R1C1" src="http://www.convertingsystems.com/uploads/2/6/8/5/26859557/6414565.jpg?222" alt="3001 Dual Turret Blown Film Winder" style="max-height:100%; max-width:100%"/>

我可以将代码粘贴到Weebly编辑器中5次，得到5个不同的结果。我回家了，我有一个更快更可靠的连接，重新编写我的代码，它工作。感谢所有的回复。

HTML：如何使用document.getElementByID更改表内容？

2 个答案: