Can't access attributes of HTML elements in JavaScript-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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