Question

我已经接近完成我的代码了，但是我仍然坚持这个最后一个障碍。我希望代码允许用户输入链接，然后当他们单击按钮时，页面通过修改img src附加实际图像。我也希望它通过使用无序列表附加图像。

这就是我所拥有的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <title>Images Reveal</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
    <script>
        window.onload = alert('Welcome to my assignment 2!')

        $(document).keypress(function(e) {
            if (e.which == 13) {
                alert('Please submit text via button');
            }
        });

        var string = "";

        function imageReveal() {
            var rubberDuckie = document.getElementById("textInput");
            var imageReveal = rubberDuckie.value;
            if (imageReveal == "") {
                alert("Please enter some text!");
            } else {
                var li = document.createElement("li");
                rubberDuckie.innerHTML = "<img src=" + rubberDuckie + " />";

                var ul = document.getElementById("listItUp");
                ul.appendChild(li);
            }
            rubberDuckie.value = "";
        }
    </script>

</head>
<body style="background-color:yellow;">
    <div align="center">
        <header>
            <h1>Alan Sylvestre</h1>
        </header>

        <input type="text" id="textInput" size="50" placeholder="Enter Some Text">
        <input type="button" id="clicking" value="Add Image" onclick="imageReveal()">
    </div>

    <ul id="listItUp">

    </ul>

    <p id="pTags">

    </p>

    </div>

</body>

Answer 1

您正在尝试将图像插入到输入中（您不能将其作为空元素）。只需将图像插入li。

li.innerHTML = "<img src=\"" + imageReveal + "\">";

Answer 2

您已经在使用jQuery，因此请充分利用其方法。尝试使用：

function imageReveal() {
    var rubberDuckie = $("#textInput");  // Get textbox element
    var imageReveal = rubberDuckie.val();  // Get textbox value
    if (!$.trim(imageReveal)) {  // If textbox is empty (after being trimmed of whitespace)
        alert("Please enter some text!");
    } else {  // If textbox has value
        var li = $("<li>");  // Create <li> element
        li.append($("<img>").attr("src", rubberDuckie));  // Add <img> element with src to the <li>
        $("#listItUp").append(li);  // Add the new <li> to the list
    }
    rubberDuckie.val("");  // Set the textbox value to empty
}

此外，您的jQuery版本（1.3.2）已经过时了。从那时起，有很多错误修复，改进和诸如此类的东西，升级到更新版本是非常明智的。目前的稳定版本是1.9.1。

1.9.1 - http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
最新 - http://code.jquery.com/jquery-latest.js

还有其他里程碑版本可供使用，但我希望继续使用最新版本以获得“最佳”版本。

Answer 3

您实际上只添加了一个列表项。

您需要在图像中添加列表项。例如，与您的代码最相似：

 function imageReveal() {
            var rubberDuckie = document.getElementById("textInput");
            var imageReveal = rubberDuckie.value;
            if (imageReveal == "") {
                alert("Please enter some text!");
            } else {
                var li = document.createElement("li");
                var ul = document.getElementById("listItUp");
                ul.appendChild(li);
                li.innerHTML = "<img src=" + imageReveal + " />";
            }
            rubberDuckie.value = "";
        }

使用innerHTML修改img src

3 个答案: