Modifying img src using innerHTML

javascript image innerhtml

13,694

Solution 1

You're trying to insert the image into an input(which you can't cause its an empty element). Just insert the image into the li.

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

Solution 2

You're already using jQuery, so take full advantage of its methods. Try using:

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
}

Also, your version of jQuery (1.3.2) is quite outdated. There are so many bug fixes, improvements and whatnot since then, that it is quite advisable to upgrade to a newer version. The current stable version is 1.9.1.

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

There are other milestone versions that would be acceptable to work with, but I like to stay with the newest version to have the "best" version out there.

13,694

Author by

Alan Joseph Sylvestre

Updated on June 04, 2022

Comments

Alan Joseph Sylvestre almost 2 years

I'm so close to finishing my code, but I'm stuck on this one little last hurdle. I want the code to allow the user to enter a link, and then when they click the button, the page appends the actual image by modifying the img src. I also want it wo append the image by using an unordered list.

Here's what I have:

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

karthikr about 11 years

you have included jquery script. Why not just use jquery to get the job done ?
Alan Joseph Sylvestre about 11 years

How would you suggest doing that?
Ian about 11 years

@karthikr An old version of jQuery, at that
excentris about 11 years

You should probably refactor your code to make better use of jQuery, since you are including it...
Menelaos about 11 years

It's included but he makes no use of it as far as I can see.
Ian about 11 years

@meewoK $(document).keypress(function(e) {
Menelaos about 11 years

@Ian Ah, thanks - there it is!!

Ian about 11 years

The attribute's value needs quoted too
Ian about 11 years

So what happens if there's spaces, quotes, or other special chars in imageReveal?
Alan Joseph Sylvestre about 11 years

@Musa: I see now what I was doing wrong. Your modified code worked great and the page works exactly as planned now. Thank you very much!
excentris about 11 years

This is the way to go...and you should probably link to the latest jQuery version.
Alan Joseph Sylvestre about 11 years

This worked great. I see exactly what I was doing wrong. Thank you for helping me figure this out!