Can't access attributes of HTML elements in JavaScript

Question

I'm trying to alter the source attribute of an image element in HTML through JS. But my issue is that I am unable to edit any attributes of the element.

If I try to log the attribute to the console, it returns undefined. But if I log .innerHTML, it will show me it's content just fine. .setAttribute won't do anything either. How do I amend such that I am able to edit the attributes of the image element?

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Ringve musikkhistoriske museum</title>
        <meta charset="UTF-8">    
        <link rel="stylesheet" href="/CSS/stilark.css">  
        
    </head>
    <body>

        <div class="overskrift"> 
        <h1 class="overskrift">Ringve musikkhistoriske museum</h1>
        </div>

        <ul>
            <li>Arrangementer</li>
            <li>Test din kunnskap</li>
        </ul>
    
    
        <div id="innpakking">
    
            <div id="infoKnapper">
                <img height="80" width ="85" src="/V2018-Museum-filer/informasjon.jpg" alt="Kunne ikke laste bilde">
                <img height="80" width ="85" src="/V2018-Museum-filer/aapningstider.jpg" alt="Kunne ikke laste bilde">
                <img height="80" width ="85" src="/V2018-Museum-filer/priser.jpg" alt="Kunne ikke laste bilde">
            </div>
    
            <div id="bildeGalleri">
                <img height="700" width ="980" src="/V2018-Museum-filer/intro1.jpg" alt="Kunne ikke laste bilde">
                    
            </div>
            <div id="bildeKnapp">
                <button>Neste bilde</button>
            </div>
        </div>
    

    </body>

<script src="/JS/kode.js"></script>  
</html>

Javascript

var bilderEL = document.querySelector("#bildeGalleri");
var bildeKnappEL = document.querySelector("#bildeKnapp");
var bildeTeller = 1;


console.log(bilderEL["src"]);
console.log(bilderEL.src);
console.log(bilderEL.innerHTML);

document.querySelector("#bildeGalleri") isn’t an HTMLImageElement; document.querySelector("#bildeGalleri img") is. — Sebastian Simon
– Sebastian Simon, Commented Oct 16, 2022 at 12:32

connexo · Accepted Answer · 2022-10-16 12:37:28Z

1

Several mistakes:

You are selecting the div, not the img.
1.1 div doesn't have a src property.
1.2 To fix it, use document.querySelector("#bildeGalleri img").
You cannot have <script> as a child of <html>.
2.1 To fix it, move it inside the body, right before the </body>.
Lastly, img tag doesn't have innerHTML because it's a void element. The parent element <div> has.
3.1 Assuming you followed 1., you can fix it with bilderEl.parentElement.innerHMTL.

answered Oct 16, 2022 at 12:37

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammed Ahmed · Accepted Answer · 2022-10-16 12:31:27Z

0

First you need to remove the id from the parent and to put the id on the img element itself:

<img height="700" width ="980" src="/V2018-Museum-filer/intro1.jpg" alt="Kunne ikke laste bilde" id="bildeGalleri">

Then you want to select it by id in JS to be like that:

var bilderEL = document.getElementById("bildeGalleri");
console.log(bilderEL.src);

answered Oct 16, 2022 at 12:31

Mohammed Ahmed

4352 silver badges12 bronze badges

Comments

Raphael Serota · Accepted Answer · 2022-10-16 12:32:21Z

0

In your javascript, you aren't selecting the image itself, you're selecting the div that contains it. Change your selector to something like this:

var bilderEL = document.querySelector("#bildeGalleri img");

answered Oct 16, 2022 at 12:32

Raphael Serota

2,21714 silver badges17 bronze badges

Collectives™ on Stack Overflow

Can't access attributes of HTML elements in JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related