Question

我试图创建一个简单的JavaScript，它应该在单击链接时切换图像。这是整个网站的代码（它并不多，但它只是一个测试）：

<html>
<head>
    <title>Slideshow</title>
    <style type="text/css">
        #wrapper {
        width: 800px;
        height: 250px;
        margin: 75px auto auto auto;
        }
    </style>
    <script type="text/javascript">
        function changeImg(x) {
        document.getElementById(presentationImg).src='x';
        }
    </script>
</head>
<body>
    <div id="wrapper">
        <div id="mainnav">
            <ul>
                <li><a href="#" onClick="changeImg(design.jpg)">Design</a></li>
                <li><a href="#" onClick="changeImg(realisation.jpg)">Realisation</a></li>
                <li><a href="#" onClick="changeImg(deployment.jpg)">Deployment</a></li>
            </ul>
        </div>
        <div id="presentation">
            <img id="presentationImg" src="design.jpg" />
        </div>
    </div>  
</body>

我很确定它会起作用，但它没有，我不知道为什么......有谁知道为什么，以及解决方案是什么？

Answer 1

删除函数中x周围的引号，并引用元素ID：

document.getElementById("presentationImg").src = x;

您还需要引用传入函数的字符串：

<a href="#" onclick="changeImg('design.jpg')">

目前的方式，presentationImg将是未定义的，因为您尚未声明该名称的变量。为了使它按原来的方式工作，你可以这样做：

var presentationImg = "presentationImg";
document.getElementById(presentationImg).src = x;

通过单击链接更改图像 - Javascript

1 个答案: