Question

156

Javascript: Load an Image from url and display

rated 0 times [ 159] [ 3] / answers: 1 / hits: 199841 / 11 Years ago, sat, july 13, 2013, 12:00:00

I want to preface this with the fact that I am very very new to JavaScript. I appreciate your patience with me.

I'm trying to create a script that allows a user to input a name into a text-area, press submit and an image is displayed based on that name.

I managed to come up with this:

<html>

<body>

<form>

<input type=text value= id=imagename>

<input type=button onclick=window.location.href='http://webpage.com/images/'+document.getElementById('imagename').value +'.png' value=GO>

</form>

</body>

</html>

Which almost does exactly what I need -loads an image around what a user inputs. But what I want is not for the image to open in a new window, or download to my computer - I want it to display on the page when clicked as an image like the example here.

I'm sure that my inexperience with Javascript is the main cause of my being unable to figure this out. The script above is as far as I can get without screwing things up. Any help is appreciated.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kylanalis

Add To Favorites

Follow

Total Points: 438

Total Questions: 85

Total Answers: 102

Location: Barbados

Member since Sun, Nov 27, 2022

1 Year ago

kylanalis questions

1 How to pass State in Context React

Sat, Oct 2, 21, 00:00, 3 Years ago

1 How to get rid of or remove spinners/arrows in react-select?

Tue, Oct 13, 20, 00:00, 4 Years ago

1 [NodeJs][Sequelize] ReferenceError: Cannot access 'ModelName' before initialization

Sat, Apr 11, 20, 00:00, 4 Years ago

1 How can I load a local image in THREE.js?

Thu, Feb 13, 20, 00:00, 4 Years ago

1 trigger('change') is not working on Select

Tue, Jan 7, 20, 00:00, 4 Years ago

View All

answered 11 Years ago jeniferjaliyahf · Accepted Answer

When the button is clicked, get the value of the input and use it to create an image element which is appended to the body (or anywhere else) :

<html>

<body>

<form>

    <input type=text id=imagename value= />

    <input type=button id=btn value=GO />

</form>

    <script type=text/javascript>

        document.getElementById('btn').onclick = function() {

            var val = document.getElementById('imagename').value,

                src = 'http://webpage.com/images/' + val +'.png',

                img = document.createElement('img');



            img.src = src;

            document.body.appendChild(img);

        }

    </script>

</body>

</html>

FIDDLE

the same in jQuery:

$('#btn').on('click', function() {

    var img = $('<img />', {src : 'http://webpage.com/images/' + $('#imagename').val() +'.png'});

    img.appendTo('body');

});