JavaScript Basics-2: Setting img src using JavaScript

The image is not getting updated using the “getElementById()” feature. Please clarify this issue.


Also , the console is saying that there is an error on line 42, which is surprisingly the closing script tag.

Hello @ajitmec, I’ve gone through your code and I have found the cause of error.
On line 17, when you use the script tag there is an extra “{”. You can remove that particular opening curly bracket and it will solve your issue.

fixed code:

  <body>
        <img src="bolt_logo.png" id="myIMG" onclick="update_image()">
        <p> Def. Text</p>
        <input id="user_number">
        <button onclick="update_user()">Submit</button>

        <script type="text/javascript">
                function update_user() {
                    user_number = document.getElementById("user_number").value; 
                    document.getElementById("output").style.color = "blue";
                    document.getElementById("output").style.fontSize = "20px";

                    httpRequest = new XMLHttpRequest();
                    httpRequest.open("GET", "https://reqres.in/api/users/" + user_number); 
                    httpRequest.send();
                    httpRequest.onreadystatechange = function() {
                        if (this.readyState== 4 && this.status== 200)
                        {
                            user_data = JSON.parse(this.responseText);
                            header = "Access-Control-Allow-Origin"
                            document.getElementById("output").innerHTML = user_data.data.first_name;
                        }
                    }
                }
                    function update_image() {
                        document.getElementById("myIMG").src = "Arav Photo.jpg";
                    }
                
        </script>
    </body>

Hope this helps.

2 Likes

Hi @ajitmec

You have used and Extra “{” after the script tag on line no.17 Kindly remove the extra curly bracket and run the code again. This should solve the issue

If you still face any issue, please feel free to get back to us.

1 Like

Thank you @ryandcunha2812 and @sneharsh.kerkar. :slight_smile:

o resolve the issue of an image not updating using the getElementById() feature, ensure the HTML element with the correct id attribute exists. For instance, <img id="myImage" src="initial-image.jpg" alt="Image"> sets up the image element. In your JavaScript, use the function updateImage(), which changes the src attribute, such as var imageElement = document.getElementById("myImage"); imageElement.src = "new-image.jpg";. Trigger this function through an event like a button click: <button onclick="updateImage()">Change Image</button>. By verifying these elements, your image should update correctly when the function is execute

Hi
It looks like there’s a syntax error in your JavaScript code. The error message indicates an “Unexpected end of input” . This typically means that there is a missing closing brace } or parenthesis ) in your code.

Document

Def. Text

Submit
<script type="text/javascript">
    function update_user() {
        var user_number = document.getElementById("user_number").value;
        document.getElementById("output").style.color = "blue";
        document.getElementById("output").style.fontSize = "20px";

        var httpRequest = new XMLHttpRequest();
        httpRequest.open("GET", "https://reqres.in/api/users/" + user_number);
        httpRequest.send();

        httpRequest.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var user_data = JSON.parse(this.responseText);
                document.getElementById("output").innerHTML = user_data.data.first_name;
            }
        }
    }

    function update_image() {
        document.getElementById("myIMG").src = "Arav Photo.jpg";
    }
</script>