Javascript 为什么尝试替换图像源时会将我浏览到该图像？_Javascript

Javascript 为什么尝试替换图像源时会将我浏览到该图像？

javascript

Javascript 为什么尝试替换图像源时会将我浏览到该图像？,javascript,Javascript,我是JavaScript新手（只读了几天书），我被这段代码所困扰。我已经看了一遍又一遍，但似乎不明白为什么它不起作用。我确信这是我刚刚忽略的一件非常简单的事情，我只是需要一双新的眼睛来看待这件事代码应该更新页面上的占位符图像，而不必重新加载页面。但是，当我单击图像的链接时，它会将我带到图像所在的链接，而不是替换占位符图像。以下是我的HTML代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

我是JavaScript新手（只读了几天书），我被这段代码所困扰。我已经看了一遍又一遍，但似乎不明白为什么它不起作用。我确信这是我刚刚忽略的一件非常简单的事情，我只是需要一双新的眼睛来看待这件事

代码应该更新页面上的占位符图像，而不必重新加载页面。但是，当我单击图像的链接时，它会将我带到图像所在的链接，而不是替换占位符图像。以下是我的HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Gallery</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
</head>
<body>

    <h1>Snapshots</h1>
    <ul>
        <li>
        <a href="images/cat.jpg" onclick="showPic(this); return false;" title="A Cat">Cat</a>
        </li>
        <li>
        <a href="images/night.jpg" onclick="showPic(this); return false;" title="Night">Night</a>
        </li>
        <li>
        <a href="images/coke.jpg" onclick="showPic(this); return false;" title="Coke">Coke</a>
        </li>
        <li>
        <a href="images/sport.jpg" onclick="showPic(this); return false;" title="Sports">Sport</a>
        </li>
        <li>
        <a href="images/mnms.png" onclick="showPic(this); return false;" title="MnM's">MnM's</a>
        </li>
        <li>
        <a href="images/kid.jpg" onclick="showPic(this); return false;" title="A Kid">Kid</a>
        </li>
    </ul>

    <br />

    <img id="placeholder" src="images/placeholder.jpg" alt="Place Holder Image" />

</body>
</html>


图像库
快照

下面是我用来完成此任务的JavaScript函数：

<script type="text/javascript">

function showPic(whichpic) { 
    var source = whichpic.getAttribute("href"); 
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source);
}

</script>


函数showPic（whichpic）{
var source=whichpic.getAttribute（“href”）；
var placeholder=document.getElementById（“占位符”）；
占位符.setAttribute（“src”，源）；
}

您缺少img标记的id属性

<img id="placeholder" src="images/placeholder.jpg" title="Place Holder Image" />

顺便说一句，既然您要声明XHTML，请确保关闭标记。

您的脚本使用

document.getElementById("placeholder");

以获取占位符元素引用。如果希望能够使用此函数，请确保设置了HTML元素的id属性。所以，无论您的占位符元素是什么，（我猜它是底部的IMG标记）set id=“placeholder”属性

既然您已经开始，请看一下文档：

从您的问题来看，您似乎正在链接到javaScript。确保您指向的位置正确如果添加div和检查.js文件的位置没有帮助，请尝试在“Firefox”上打开页面，然后单击链接并查找脚本错误。如何做到这一点是：从“工具”菜单中，选择“错误控制台”

这将为您提供有关出错原因的有用信息。如果您有错误并且无法确定发生了什么，请将其发布到此处。

您正在通过document.getElementById访问的“占位符”在哪里？顺便说一句，有一种更好的方法可以将事件附加到DOM元素集合（）我不知道问题出在哪里，我只是尝试了您的代码，它在FF 3.6下运行良好。您确定您的图像位于相对于HTML文档的images文件夹中吗？@Mahesh Velaga-我的坏消息。编辑了错误的评论。我把我的拿走了。嘿，谢谢你的回复。我更改了代码行以添加以下内容：[code][/code]，但它仍然不适用于我。还有其他想法吗？请正确关闭图像标签，注意末尾的“/>”而不是“>”