Question

我是javascript的新手.. 我正在读一本名为DOM SCRIPTING的书。

我尝试编写一个示例但不幸的是链接显示了直接图像.. 我想要做的是交换图像。这是js代码

 document.ready = function () {
     function showPicture(pictureChoosen) {
            var source = pictureChoosen.getAttribute('href');

            var placeholder = document.getElementById('plaecehlder');
            placeholder.setAttribute('src', source);

        }

    }

这是我的HTML代码

   <ul>
    <li><a href="images/journee.jpg" onclick="showPicture(this);return false;">Journee</a></li>
    <li><a href="images/coffee.jpg">Coffee</a></li>

</ul>
<img id="plaecehlder" src="*" alt="" />Placeholder

请告诉我我做错了什么..谢谢......

Answer 1

你不需要这个：

document.ready = function () {

}

只需定义功能。由于您在另一个函数内部具有该函数，因此它仅在本地范围内，而不在onclick处理程序正在查找的全局范围内。但更好的是，给元素一个id：

document.getElementById("foo").attachEvent // IE

document.getElementById("foo").addEventListener // standards-compliant

attachEvent文档

addEventListener文档

你可能会混淆jQuery的$(document).ready(function(){});和普通的DOM。这是

的捷径

document.addEventListener("DOMContentLoaded", function(){}, false);

将回退到旧浏览器中的窗口onload事件。如果你想在一个函数中包装所有内容，你需要：

window.onload = function() {

    function showPicture(pictureChoosen) {
        var source = pictureChoosen.getAttribute('href');
        var placeholder = document.getElementById('plaecehlder');
        placeholder.setAttribute('src', source);

    }

    document.getElementById("foo").onclick = function() {
        showPicture(this);
        return false;
    }
}

以便您的函数定义在与分配给元素相同的范围内。

无法在javascript中附加事件

1 个答案: