2

コードの完成に近づいていますが、最後のハードルが 1 つ残っています。ユーザーがリンクを入力できるようにするコードが必要です。ユーザーがボタンをクリックすると、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 に答える