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

Question

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

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

1. 指定更改标题

2. 指定更改段落

3. 指定更改表

我将代码嵌入到Weebly网站中，因为这是我们以前的网站管理员选择的“ Web Hosting”。 因此，考虑到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%"/>

我可以将代码粘贴5次到Weebly编辑器中，并获得5个不同的结果。 我回到家时，我有了一个更快，更可靠的连接，拒绝了我的代码，它开始工作了。 谢谢您的所有答复。