Question

我想制作一个用户可以插入网址的页面，当他们点击按钮时，他们的图片就会显示在页面上。但是，当代码现在，当用户插入他们的网址时，它会显示网址，而不是图片。关于我做错了什么的任何想法？谢谢！

    <script>
        function start() {
            var button = document.getElementById("addButton");
                button.onclick = buttonClick;
        }
        window.onload = start;

        function buttonClick() {
            var imageLinkInput = document.getElementById("imageInput");
            var imageLink = imageLinkInput.value;
            if (imageLink == "") {
                alert("Please enter an image");
            }
            else {
                var li = document.createElement("li");
                li.innerHTML = imageLink;


                var ul = document.getElementById("images");
                ul.appendChild(li);


                imageInput.value = "";
            }
        }
    </script>
<body>
    <input type="text" id="imageInput" size="40" placeholder="Enter Image">
    <input type="button" id="addButton" value="Add Image">
    <ul id="images"></ul>

</body>

Answer 1

您应该创建一个新的Image元素（“img”）并将其添加到无序列表中：

    <script>
        function start() {
            var button = document.getElementById("addButton");
                button.onclick = buttonClick;
        }
        window.onload = start;

        function buttonClick() {
            var imageLinkInput = document.getElementById("imageInput");
            var imageLink = imageLinkInput.value;
            if (imageLink == "") {
                alert("Please enter an image");
            }
            else {
                var ul = document.getElementById( 'images' );
                var li = document.createElement( 'li' );

                // create image tag here and set source
                var img = document.createElement( 'img' );
                img.src = imageLink;

                li.appendChild( img );
                ul.appendChild( li );

                imageInput.value = '';
            }
        }
    </script>
<body>
    <input type="text" id="imageInput" size="40" placeholder="Enter Image">
    <input type="button" id="addButton" value="Add Image">
    <ul id="images"></ul>
</body>

请看这个小提琴：http://jsfiddle.net/kukiwon/HDWzz/

Answer 2

不是设置li的innerHtml，而是创建一个新的img元素并设置它的来源并将其附加到li。

var ul = document.getElementById( 'images' );
var li = document.createElement( 'li' );
var img = document.createElement( 'img' );
img.src = imageLink;
li.appendChild( img );
ul.appendChild( li );
imageInput.value = '';

如何使用DOM编写脚本？

2 个答案: