使用javascript

Question

我一直在尝试使用以下代码来更改图像的src

document.getElementById('test').src='images/test2.png';

我的代码如下所示。里面有一些CSS和其他内容，但是重要的部分是div和img以及函数。

<div id='splashScreen' class='splash'>
  <button class='bigButton' onclick='introSplash()'>Hi</button>
  <img class='splashImages' src='images/splashScreen1.png'>
</div>

这是我的图片，顶部有一个页面大小的透明按钮

<script>
function introSplash() {
    document.getElementById('splashImages').src='images/splashScreen2.png';
  }
</script>

此功能应替换按钮下方的图像。

按下带有此代码的按钮将返回以下错误消息：

未捕获的TypeError：无法将属性'src'设置为null 在introSplash

所有图像都保存在本地并以这些名称存在

我不确定为什么会发生这种情况，将不胜感激。

Answer 1

您需要将ID test添加到<img>元素：

<img id='test' class='splashImages' src='images/splashScreen1.png' />

现在您的代码可以使用了。

不添加任何ID的替代方法是像这样使用document.getElementsByClassName：

document.getElementsByClassName('splashImages')[0].src='images/test2.png';

Answer 2

请确认您使用的是document.getElementById('splashImages')，但是html元素没有ID。添加id属性

<img id="splashImages" class='splashImages' src='images/splashScreen1.png'>

请尝试一下，让我知道它如何工作：）

Answer 3

您尝试通过id获取元素，但是仅给出class="splashImages"。

Answer 4

document.getElementById('splashImages')返回null，因为所需的元素没有正确的ID。请改用getElementsByClassName，或为其提供正确的ID。

因此，您应该实施以下更改之一：

<script>
function introSplash() {
    document.getElementsByClassName('splashImages').src='images/splashScreen2.png';
  }
</script>

或

<div id='splashScreen' class='splash'>
  <button class='bigButton' onclick='introSplash()'>Hi</button>
  <img id='splashImages' class='splashImages' src='images/splashScreen1.png'>
</div>