Can't access attributes of HTML elements in JavaScript

October 16, 2022

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);

>Solution :

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.