Geändert img src verwenden von innerHTML -

Ich bin so nah beende mein code, aber ich bin stecken geblieben auf diese Letzte kleine Hürde. Ich möchte den code, um dem Benutzer zu ermöglichen, geben Sie einen link, und dann, wenn Sie auf die Schaltfläche klicken, die Seite fügt das aktuelle Bild durch ändern des img-src. Ich will auch, dass es wo Anhängen, das Bild mit einer ungeordneten Liste.

Hier ist, was ich habe:

<!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>

Sie haben die mitgelieferte jquery-Skript. Warum nicht einfach jquery verwenden, um den job zu erledigen ?
Wie würden Sie vorschlagen zu tun?
Ein alt - version von jQuery, dass
Sie sollte wohl umgestalten von code zur besseren Nutzung von jQuery, da Sie es...
Ah, danke - da ist es!!

InformationsquelleAutor Alan Joseph Sylvestre | 2013-04-16

  1. 1

    Versuchst du das Bild einfügen in eine Eingabe(die können Sie nicht dazu, dass der ein leeres element). Legen Sie einfach das Bild in der li.

    li.innerHTML = "<img src=\"" + imageReveal + "\">";
    Der Wert des Attributs muss zitiert zu
    needs keine should ja
    Was passiert also, wenn es Leerzeichen, Anführungszeichen oder andere Sonderzeichen in imageReveal?
    Ich sehe jetzt, was ich falsch machte. Ihren geänderten code hat Super funktioniert und die Seite funktioniert genau wie geplant jetzt. Ich danke Ihnen sehr!

    InformationsquelleAutor Musa

  2. 1

    Bist du schon mit jQuery, so nehmen Sie vollen Vorteil seiner Methoden. Versuchen Sie es mit:

    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
}

    Auch, Ihre version von jQuery (1.3.2) ist ziemlich veraltet. Es gibt so viele bug-fixes, Verbesserungen und so weiter, da, das ist es durchaus ratsam, ein upgrade auf eine neuere version. Die aktuelle stabile version ist 1.9.1.

    Gibt es weitere milestone-Versionen, die nicht akzeptabel ist, mit zu arbeiten, aber ich mag zu bleiben mit der neuesten version zu haben, die "beste" version die es gibt.

    Dies ist der Weg zu gehen...und Sie sollten wahrscheinlich link auf die neueste jQuery-version.
    Danke, und guter Punkt, ich habe es 🙂

    InformationsquelleAutor Ian

  3. 0

    Eigentlich nur ein Listenelement hinzufügen.

    Müssen Sie den Punkt der Liste neben dem Bild. Zum Beispiel, und die meisten ähnlich wie Ihre-code:

     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 = "";
        }
    Dies hat Super funktioniert. Ich sehe genau, was ich falsch machte. Danke, dass Sie mir helfen dies herauszufinden!

    InformationsquelleAutor Menelaos Bakopoulos

Schreibe einen Kommentar