javascript - HTML:如何使用 document.getElementByID 更改表格内容？

Question

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

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

1. 指定改变表头

2. 指定更改段落

3. 指定改变一个表

我正在将代码嵌入到 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>