JAVA Script interne verlinkung im fragebogen

Question

Wie kann ich einen Kreis innerhalb einer Vektorgrafik in HTML auf eine bestimmte Seite des Fragebogens verlinken (sobald der Kreis angeklickt wird, soll die entsprechende Seite erscheinen)?

Damit das funktioniert, müssen die Daten der aktuellen Seite per Formular-Submit an den Server verschickt werden.

Sie können - wie Sie schon ansprechen - mittels buttonToPage() einen Knopf einfügen, der die korrekte Funktion hätte. Den verstecken Sie aber, indem Sie ihn mittels CSS aus dem sichtbaren Bereich hinaus schieben, oder einfach transparent schalten.

>> bis hierher funktioniert es

Nun brauchen Sie nur noch ein wenig Javascript, welches beim Klick auf den Kreis den Knopf anklickt.

wie würde das javascript aussehen, und wie integriere ich den code in meine svg (html)?

Vielen Dank schon einmal.

Answer 1

Wenn Sie das SVG direkt im HTML-Code eingebunden haben, dann können Sie den einzelnen Elementen eine ID geben z.B. <circle id="meinKreis" ...> und diese auch direkt aus dem JavaScript heraus ansprechen.

Allerdings habe ich mit SVGs direkt im HTML-Code eine Weile nicht mehr gearbeitet, daher folgender Code nur als erste Inspiration - posten Sie gerne einen Pretest-Link direkt zur betroffenen Seite, wenn es nicht funktioniert.

var kreis = document.getElementById("meinKreis");

kreis.addEventlistener("click", function() {
  var button = document.getElementById("submit1");  // Die HTML-Kennung  müssen Sie heraussuchen
  button.click();
});

Das Ganze würden Sie unter das SVG packen und/oder mittels window.addEventListener("load", ...) aufrufen, damit alle Elemente gefunden werden.