Einfügen von Links in meinen PopUpText

triceps · February 3, 2020, 9:07am

Hallo!
Ich habe zuletzt versucht einen link in meinen popuptext einzufügen.
Folgendes Problem tritt dabei auf:
Die Seite wird nicht mehr angezeigt sobald ich eine Kleinigkeit verändere:

hier der Text den ich in meinem Popup als String an dei JS Funktion übergebe:

function addMarker(layer, lon, lat, popupContentHTML) {

var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));
var feature = new OpenLayers.Feature(layer, ll);
feature.closeBox = true;
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(180, 180) } );
feature.data.popupContentHTML = popupContentHTML;
feature.data.overflow = "hidden";

var marker = new OpenLayers.Marker(ll);

marker.feature = feature;

var markerClick = function(evt) {
    if (this.popup == null) {
        this.popup = this.createPopup(this.closeBox);
        map.addPopup(this.popup);
       this.popup.show();
    } else {
        this.popup.toggle();
    }
    OpenLayers.Event.stop(evt);
};
marker.events.register("mousedown", feature, markerClick);

layer.addMarker(marker);

// map.addPopup(feature.createPopup(feature.closeBox)); Popups sollen nicht sofort angezeigt werden

/*

http://dev.openlayers.org/img/marker-green.png
*/
}

Ich will nun den momentan dargestellten Text “betteln” als darstellen also als Link.
Reguläre Syntax wäre:

link text

egal was ich eingebe, es wird einfach garnichts mehr angezeigt.
Kann mir jemand vielleicht ein Beispiel geben? Oder liegt es an dem String den ich übergebe?
LG Triceps

dieterdreist · February 3, 2020, 10:13am

ich vermute, es hängt mit dem Escaping zusammen. Versuche mal, die Anführungszeichen als ’ innerhalb der Variablendefinition, die mit " gekennzeichnet ist (oder anders rum, ist egal, aber anstatt " ).

triceps · February 3, 2020, 11:18am

Hi!
Danke für deine schnelle Antwort!
Leider hat das bei mir nicht funktioniert…
Danke
Triceps

gormo · February 3, 2020, 12:25pm

Hast Du es so probiert:

var popuptextbetteln='<font color="black"><a href="hierdieurl">Betteln</a><p><img src="Betteln1.jpg" width="60" height="60"></p></font>';

Kennst Du die JavaScript-Konsole deines Browsers, die du mit der Taste F12 aufkriegst? Da gibts detailliertere Fehlermeldungen, die du dann in Zukunft mit angeben kannst (denn mit “funktioniert nicht” können wir hier nicht so viel anfangen und müssen raten).

Viel Erfolg!

dieterdreist · February 3, 2020, 12:26pm

es wird jedenfalls ziemlich sicher ein Problem irgendwo sein, dass falsch gequotet wird, oder ein Strichpunkt vergessen ist, oder was in der Art, Du solltest Dir die js Fehler ansehen in der Konsole, da kannst Du vermutlich erkennen, wo genau der Fehler liegt.

fx99 · February 3, 2020, 1:03pm

Wie ist der Zusammenhang zw. den var popuptextbetteln / popuptextbetteln2 und dem Rest des Codes?

rainerU · February 3, 2020, 1:11pm

Aus deinem Beitrag kann ich nicht entnehmen, was die Kleinigkeit ist, die du veränderst. Es wäre hilfreich, wenn du die veränderten Code-Zeilen vor und nach der Änderung hier einstellen würdest.

Hat das Popup mit dem Code der Funktion addMarker, wie du sie in deinen Beitrag eingebunden hast, schon mal funktioniert, z.B. wenn du in popupContentHTML nur reinen Text übergibst?

triceps · February 3, 2020, 1:16pm

Vielen Dank für die schnellen Antworten:

So hatte ich es im Sinn:
Original:


var popuptextbetteln="<font color=\"black\"><b>Betteln<br><br></b><p><img src=\"Betteln1.jpg\" width=\"60\" height=\"60\"></p></font>";
   var popuptextbetteln2="<font color=\"black\"><b>Motel buchen<br>link<br></b><p><img src=\"motel.jpg\" width=\"60\" height=\"60\"></p></f

Meine Version mit dem Versuch einen Link einzufügen:


var popuptextbetteln="<font color=\"black\"><a href="http://www.tagesschau.de/">ARD Tagesschau</a><img src=\"Betteln1.jpg\" width=\"60\" height=\"60\"></p></font>";
   var popuptextbetteln2="<font color=\"black\"><b>Motel buchen<br>link<br></b><p><img src=\"motel.jpg\" width=\"60\" height=\"60\"></p></f

Das habe ich eingefügt:


<a href="http://www.tagesschau.de/">ARD Tagesschau</a>

Überall sonst funktioniert die href einwandfrei.
Ich verstehe nicht was ich falsch mache…

LG
Triceps

triceps · February 3, 2020, 1:23pm

Der Zusammenhang mit dem Betteln besteht folgendermaßen:

Wegen eines Schulprojekts wollten wir eine Webseite namens PennerGame nachbasteln.
Allerdings kann uns auch der Zuständige Lehrer leider nicht helfen.
In dem Popuptext soll lediglich der TExt im Popupfenster übergeben werden.
Darin sollte sich ein Link befinden. So kann der Nutzer sich von Position von Position navigieren…
LG
Triceps

rainerU · February 3, 2020, 1:39pm

triceps:


var popuptextbetteln="<font color=\"black\"><a href="http://www.tagesschau.de/">ARD Tagesschau</a><img src=\"Betteln1.jpg\" width=\"60\" height=\"60\"></p></font>";
   var popuptextbetteln2="<font color=\"black\"><b>Motel buchen<br>link<br></b><p><img src=\"motel.jpg\" width=\"60\" height=\"60\"></p></f

Warum machst du bei color einen Backslash vor die Anführungszeichen, bei href aber nicht? So kann das nicht funktionieren. Allerdings sollte das auch in der Debug-Konsole des Browsers eine Fehlermeldung erzeugen.

Wenn man mit Javascript und OpenLayers entwickelt, empfiehlt es sich zunächst immer die Konsole des Browsers offen zu haben und auf Fehlermeldungen zu achten. Bei Firefox öffnet man die Konsole entweder über das Kontextmenü und “Element untersuchen” und dann auf das Tab “Konsole”, “Fehler” und “Warnungen” aktivieren.

gormo · February 3, 2020, 2:14pm

var popuptextbetteln="<font color=\"black\"><a href="http://www.tagesschau.de/">ARD Tagesschau</a><img src=\"Betteln1.jpg\" width=\"60\" height=\"60\"></p></font>";

Das konkrete Problem ist, das für den Javascript-Interpreter im Browser, also der Programmteil der dein Javascript ausführt, eine Zeichenkette (engl: string) da aufhört, wo ein Begrenzungszeichen ist. Du kannst deinen String entweder mit " oder mit ’ begrenzen.

var soGehts = "Hallo"; // OK
var soGehtsAuch = 'HalloHallo'; // OK
var soNicht = "Hallo'; // falsch
var soAuchNicht = 'Hallo"; // falsch

Dein Code ließt sich so, als würde der String popuptextbetteln nur

<font color=\"black\"><a href=

sein, denn das doppelte Anführungszeichen vor http://www.tagesschau.de ist nicht maskiert (also als " geschrieben), und wird deshalb als Begrenzungszeichen interpretiert. Danach kommt dann der Programmiersprachenbefehl http://www.tagesschau.de, und den gibts nicht, klar.

Doppelte Anführungszeichen als Textbegrenzer: einfach ".
Doppelte Anführungszeichen als Teil des Textes: mit "

maxbe · February 3, 2020, 2:29pm

Hier beide Varianten:

var muenchentext="M&uuml;nchen<br>Stadt in Deutschland<br><img src=\"thu_muenchen15.jpg\"/><br><a href=\"https://www.tagesschau.de/\" target=\"_blank\">Tagesschau</a>";
addMarker(layerpkt, 11.58, 48.13, muenchentext );
var venedigtext='Venedig<br>Stadt in Italien<br><img src="thu_venedig18.jpg"/><br><a href="https://www.rainews.it/" target="_blank">RAI News</a>';
addMarker(layerpkt, 12.33, 45.43, venedigtext);

Sieht dann so aus: http://geo.dianacht.de/tests/popupmitx4.html