时间戳

首页 > 解决方案 > 未捕获的类型错误：无法设置未定义的属性“src”...但它已定义？

javascript - 未捕获的类型错误：无法设置未定义的属性“src”...但它已定义？

问题描述

我正在学习 JavaScript，我正在研究一些东西来钻研它，我开始了一个小而简单的项目，我试图让图像在按下按钮后切换，我已经用变量定义了我需要的一切但是当我单击按钮时，它只会给我一个错误：Uncaught TypeError: cannot set property 'src' of undefined，即使我要求它将 src 属性设置为，已定义并且我不明白为什么它有麻烦，我看不出问题或原因？

我尝试重新识别 HTML 元素并尝试使用不同的元素是 Js 来查看是否有我遗漏的问题，我尝试重新编写代码以消除我看不到的任何内容。我已经运行了我的其余代码，以检查是否存在可能干扰执行的任何其他错误。

HTML：

<div class="col-md-4" id="coin">
    <img src="images/coin-0.jpg" alt="Coin" id="coin-img" />
    <button id="coin-flip">Flip Coin</button>
</div>

JavaScript：

document.querySelector('#coin-flip').addEventListener('click', function() 
{
    var flip = Math.floor(Math.random() * 2);
    document.querySelector('#coin-img').document.src = 'images/coin-' + 
    flip + '.jpg';
});

基于 Math.random 的工作，我希望在执行时更改 img src 是变量。到目前为止，一切都在进行中。

标签： javascript

解决方案

怎么了？

它给您未定义的错误，因为您在下面一行中编写的第二个“文档”未定义。

    document.querySelector('#coin-img').document.src = 'images/coin-' +

解决方案

我怀疑您错误地编写了第二个“文档”，只是希望直接在“querySelector”上更改“src”属性，而不是在第二个“文档”上。

这应该作为“querySelector”返回您要求的 HTML 元素，在本例中为“img”元素。其中具有 src 属性。

document.querySelector('#coin-flip').addEventListener('click', function() 
{
    var flip = Math.floor(Math.random() * 2);
    document.querySelector('#coin-img').src = 'images/coin-' + 
    flip + '.jpg';
});

如果其他一切设置正确，那么这个解决方案应该可以工作。

推荐阅读