Question

每当用户点击超链接时，我都会尝试在同一页面中更改图片。以下是我的代码。当我点击任何超链接时，它不会调用函数changeImage。请帮忙.....

<body>
        <h1>Click on any hyper link</h1>

        <div class="left">
            <ul>
                <li>
                    <a href="rabbit.jpeg" onclick="changeImage(this); return false;">Rabbit</a>
                </li>
                <li>
                    <a href="lion.jpeg" onclick="changeImage(this); return false;">Lion</a>
                </li>
                <li>
                    <a href="tiger.jpeg" onclick="changeImage(this); return false;">Tiger</a>
                </li>

                <li>
                    <a href="wolf.jpeg" onclick="changeImage(this); return false;">Wolf</a>
                </li>
            </ul>
        </div>

        <div class="right">
            <img src="rabbit.jpeg" id="placeHolder"></img>
        </div>

        <script>
            function changeImage(element){
                var imgValue = element.getAttribute("href");
                var placeHolder = document.getElementbyId("placeHolder");
                placeHolder.setAttribute("src", imgValue);
            }
        </script>
    </body>

Answer 1

您的Javascript中有拼写错误。改变

var placeHolder = document.getElementbyId("placeHolder");

到

var placeHolder = document.getElementById("placeHolder");。

function changeImage(element){
                var imgValue = element.getAttribute("data-src");
                var placeHolder = document.getElementById("placeHolder");
                placeHolder.setAttribute("src", imgValue);
            }

a:hover{ cursor:pointer; }

        <h1>Click on any hyper link</h1>

        <div class="left">
            <ul>
                <li>
                    <a href="#" data-src="rabbit.jpeg" onclick="changeImage(this); return false;">Rabbit</a>
                </li>
                <li>
                    <a href="#" data-src="lion.jpeg" onclick="changeImage(this); return false;">Lion</a>
                </li>
                <li>
                    <a href="#" data-src="tiger.jpeg" onclick="changeImage(this); return false;">Tiger</a>
                </li>

                <li>
                    <a href="#" data-src="wolf.jpeg" onclick="changeImage(this); return false;">Wolf</a>
                </li>
            </ul>
        </div>

        <div class="right">
            <img src="rabbit.jpeg" id="placeHolder"></img>
        </div>

超链接onclick不起作用

1 个答案: