Uncaught TypeError: Cannot read property 'getAttribute' null

Ich habe gerade angefangen JavaScript lernen. Ich will einfach nur, um zu bauen ein Bild Karussell, aber ich bekomme einen Fehler bei meiner ersten Zeile:

Uncaught TypeError: Cannot read property 'getAttribute' null

js:

function changeImage(){
    var imageSrc=document.getElementById("image").getAttribute("src");
}
changeImage();

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="hello.js"></script>
    <title></title>
</head>
<body>
    <div id="button_left">
        <img id ="left" src="left.png">
    </div>
    <div id="button_right">
        <img id ="right" src="right.png">
    </div>
    <div class="container">
        <img id ="image" src="1.jpg">
    </div>
    <div id="result"></div>
</body>
</html>
sollten Sie das Skript-tag am Ende des body-Tags oder führen Sie den code in hello.js auf dem onload-Ereignis, so läuft es, nachdem die Seite gerendert wird. Wie es jetzt ist, die Seite ist noch nicht gerendert, wenn der code in hello.js interpretiert wird.

InformationsquelleAutor fiddletag | 2015-09-12

  1. 3

    Tritt der Fehler auf, weil die "Bild" - Objekt noch nicht geladen ist, wenn die Methode aufgerufen wird.

    Müssen Sie, um die "changeImage ()" - Methode auf, nachdem das DOM geladen ist, wie in der body onload-Ereignis,

    <body onload="changeImage();">

    oder fügen Sie das Skript-tag als letztes in der Körper sicherstellen, dass das image-Objekt geladen wird.

    InformationsquelleAutor LGSon

  2. 1

    Das problem ist, weil document.getElementById("image") im Skript aufgerufen wird, noch bevor das gezielte element geladen ist, kehrt undefined/null. Und dann die verkettete .getAttribute("src") genannt wird, auf eine undefined/null Objekt.

    Einer der vielen möglichen Lösungen ist zum ausführen der Funktion nach dem laden der Seite. Ändern Sie den code in Ihrem Skript zu unten:


    window.onload = function () {
    var imageSrc=document.getElementById("image").getAttribute("src");
    }

    in hello.js wird das Skript ausgeführt, nachdem die Seite vollständig geladen wurde.

    Anderen Antworten sind in mehrere andere Möglichkeiten, dies zu nähern.

    InformationsquelleAutor Fr0zenFyr

  3. 0

    Diesem Weg versuchen:

    var imageSrc = document.querySelectorAll('image[id=your-image-id]')[0].getAttributeNode("src").value;

    Oder jQuery verwenden:

    var imageSrc = $('image[id="your-image-id"]').attr('src');

    InformationsquelleAutor Dung Vu

  4. 0

    Weil Sie im Zusammenhang mit Ihrer JavaScript-Datei im head-Bereich Ihrer HTML-Seite. In diesem Fall JS-Datei geladen wird, bevor der HTML-und JavaScript-code nicht finden können, ein tag mit der id des Bildes. Also, schreiben Sie Ihre Skript-tag an der Unterseite der HTML-Seite.

    Zwar ist dies okay, es ist weit mehr Redewendungen, um einen listener registrieren, auf der DOMContentLoaded Veranstaltung und Zugriff auf das Bild.

    InformationsquelleAutor Farzin

  5. -1

    Der Grund könnte im Zusammenhang mit einer fehlenden name Attribut in der img element.

    InformationsquelleAutor Burak Karakuş

Schreibe einen Kommentar