2

我非常接近完成我的代码，但我被困在最后一个小障碍上。我希望代码允许用户输入链接，然后当他们单击按钮时，页面通过修改 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>

4

3 回答 3

1

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

li.innerHTML = "<img src=\"" + imageReveal + "\">";
于 2013-04-16T17:56:52.507 回答
1

您已经在使用 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。

还有其他可以使用的里程碑版本，但我喜欢使用最新版本以获得“最佳”版本。

于 2013-04-16T17:57:29.697 回答
0

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

除了图像之外，您还需要添加列表项。例如，与您的代码最相似：

 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 = "";
        }
于 2013-04-16T17:58:50.953 回答