Programmiererforum

SVG Test


Select a circle







// do this if selected
function handleClick(elementId) {
alert('"' + elementId + '" selected');
}

// event listener
document.getElementById("circle").addEventListener("click", function () {
handleClick("circle");
});

// event listener
document.getElementById("circle_in_svg").addEventListener("click", function () {
handleClick("circle_in_svg");
});

Ich weiß, dass das nichts Neues ist und ich habe ein paar Tipps gefunden, wie man das Problem lösen kann. Aber ich kann es nicht loswerden. Das ist mein einfacher Code:
[code]


SVG Test


Select a circle







// do this if selected
function handleClick(elementId) {
alert('"' + elementId + '" selected');
}

// event listener
document.getElementById("circle").addEventListener("click", function () {
handleClick("circle");
});

// event listener
document.getElementById("circle_in_svg").addEventListener("click", function () {
handleClick("circle_in_svg");
});




[/code]
Dies zeigt zwei Kreise.
Die SVG-Datei „circle.svg“ hat genau den gleichen Inhalt wie die drei Zeilen unter . Nur die ID wird von „circle“ in „circle_in_svg“ geändert.
Das ist also die Situation:
[list]
[*] < script >... liegt unter < object >... d. h. „circle_in_svg“ sollte bekannt sein.
[*]Die beiden Kreise werden in der richtigen Reihenfolge angezeigt: zuerst der Kreis in der Datei, Zweitens der Kreis inline.
[*]'defer' oder 'async' hilft nicht. Übrigens: Beides wegzulassen bedeutet für mich: Laden Sie die Datei und fahren Sie [b]nach[/b] fort, nachdem die Datei geladen wurde, sodass die ID verfügbar sein sollte.
[/list]
Nach dem Laden dieser Seite erhalte ich die Fehlermeldung (F12 in Mozilla): „Uncaught TypeError: document.getElementById(...) is null“. Und natürlich funktioniert es nicht wie vorgesehen...
Irgendeine Hilfe?