How Can I display image in HTML Page

Asked Aug 01 '21 at 20:30

Active Aug 01 '21 at 20:37

Viewed 50 times

I have a web page with a clickable button that should display an image after clicking. It works fine when using fiddle but when I took it offline it doesn't display any image.

This is the code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="jquery-1.8.3.min.js"></script>
    
    <script>
        $('#btn').on('click', function() {
    $('#img').attr('src', $('#url').val());
    });
    </script>


    <style>
        .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}
    </style>
    <title>Document</title>
</head>
<body>
    <br><br>
<img src="" id="img" class="center">

<br><br>

Type in a URL to an image below :<br><br>

<input type="text" id="url"/><input type="button" id="btn" value="show image" />

</body>
</html>

asked Aug 01 '21 at 20:30

Usifu Barrie M

1

You're offline. The browser cannot fetch the image. – Someone_who_likes_SE Aug 01 '21 at 20:31
I am presently online as am working on it – Usifu Barrie M Aug 01 '21 at 20:33
2

When you run `$('#btn')` the button doesn't exist yet. You need to move your – ChrisG Aug 01 '21 at 20:34
1

Duplicate: [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – ChrisG Aug 01 '21 at 20:35
It perfectly worked sir. Thank you very much boss. – Usifu Barrie M Aug 01 '21 at 20:38
You should place your script inside jQuery's `ready()` as button is not yet loaded when the script loads. – Kalyan Aug 02 '21 at 02:55

How Can I display image in HTML Page

0 Answers0