[FRAGE] HREF mit JavaScript überschreiben/ändern

[Saiien II]

Hallo,

ich darf unsere Firmenwebsite, welche per 1&1 MyWebsite erstellt wurde, verwalten und möchte noch etwas mehr raus holen.

Sicher werden diese "Homepagebaukasten" von euch belächelt, aber ist nunmal so wie es ist...

Also: Ich kann nur in den HEAD der Seite eingreifen und möchte per kleinem JavaScript den Link zu den Unterseiten oben (Navigation) verändern (z.B. Fensterlos UG (haftungsbeschränkt) - Leistungen), da das sonst nicht möglich wäre. Mein Ziel ist dass er statt zur Unterseite zu verlinken an eine Position auf der Seite scrollt, also z.B. "www.fensterlos.com#xyz"

Hier die Seite: Fensterlos UG

Hier war ich glaube schon auf der richtigen Spur, hatte aber keinen Erfolg: How to change href of <a> tag on button click through javascript - Stack Overflow

Die Objekt ID hab ich noch raus gefunden, aber dann hörts auf...

<script type="text/javascript">
  function f1()
  {
    document.getElementById("abc").href="xyz.php"; 
  }
</script>

Ich bekomme zwar keinen Error... aber der Link wird auch nicht geändert.

Er soll also den vorgegebenen Wert "überschreiben", ist das möglich?

 

[mikdoe]

*freigeschaltet*
*verschoben aus Scriptcheck*
*code tags ergänzt*
*Präfix korrigiert*

 

[rico2009]

Versuchs mal so:
document.getElementById("abc")[0].setAttribute("href","xyz.php");

 

[sos]

Die Stelle muss auch die Id "xyz" haben.

 

[Saiien II]

Danke für die Hilfe. Noch habe ich es nicht hinbekommen...

Ich glaube ich hab die falsche ID. Das steht im Quelltext:

<a data-page-id="1375007" href="http://www.fensterlos.com/impressum/" class="current level_1"><span>Impressum</span></a>

Ich dachte "1375007" wäre die ID, ist wohl aber die Page ID... kann man damit arbeiten?

 

[kkapsner]

Dein Problem ist, dass dein Code gar nicht ausgeführt wird. Du hast einfach nur eine Funktion definiert, die etwas macht, ABER sie wird nicht aufgerufen. Wenn du das href so früh wie möglich ersetzen willst, solltest du diese Funktion beim DOMContentLoaded-Event registrieren:

document.addEventListener("DOMContentLoaded", f1);

Da die ID, die du ansprichst, aber nicht existiert, wird du dann eine Fehlermeldung in der Fehlerkonsole bekommen.
Ich würde das Element ja über document.querySelector() ansprechen:

document.addEventListener("DOMContentLoaded", function(){
	document.querySelector("a[data-page-id=1375007]").href = "#xyz";
});

PS: f1 ist kein guter Funktionsname.

 

[Saiien II]

Dein Problem ist, dass dein Code gar nicht ausgeführt wird. Du hast einfach nur eine Funktion definiert, die etwas macht, ABER sie wird nicht aufgerufen. Wenn du das href so früh wie möglich ersetzen willst, solltest du diese Funktion beim DOMContentLoaded-Event registrieren:

document.addEventListener("DOMContentLoaded", f1);

Da die ID, die du ansprichst, aber nicht existiert, wird du dann eine Fehlermeldung in der Fehlerkonsole bekommen.
Ich würde das Element ja über document.querySelector() ansprechen:

document.addEventListener("DOMContentLoaded", function(){
	document.querySelector("a[data-page-id=1375007]").href = "#xyz";
});

PS: f1 ist kein guter Funktionsname.

Vielen Dank - ich glaube wir sind auf dem richtigen Weg.

Habe es wie du meintest in den HEAD kopiert und die Page ID noch in '' eingefasst, da es sonst einen Error gab.

Soweit so gut, jetzt gibt es zwar keinen Error aber der Link wird trotzdem noch nicht geändert.

<script type="text/javascript">
//<![CDATA[
document.addEventListener("DOMContentLoaded", function(){
        document.querySelector("a[data-page-id='1375007']").href = "#xyz";
});
//]]>
</script>

Hab ich was falsch gemacht? Oder hapert es vielleicht an der Page ID?

Ohne die '' (also wie du es geschrieben hast) bekomme ich folgenden Error:

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': 'a[data-page-id=1375007]' is not a valid selector.(anonymous function) @ (index):129
util.js:30

 

[kkapsner]

Ah... du hast zwei Links auf der Seite mit der gleichen Pade-ID... dann darfst du natürlich nicht mit document.querySelector() arbeiten, sondern must document.querySelectorAll() verwenden:

document.addEventListener("DOMContentLoaded", function(){
        Array.prototype.slice.call(document.querySelectorAll("a[data-page-id='1375007']")).forEach(function(link){
        	link.href = "#xyz";
        });
});

PS: Da du nicht mit XHTML arbeitest, brauchst du auch die ganze Kommentardekoration für den Inhalt der <script>s nicht.

 

[Saiien II]

Ah... du hast zwei Links auf der Seite mit der gleichen Pade-ID... dann darfst du natürlich nicht mit document.querySelector() arbeiten, sondern must document.querySelectorAll() verwenden:

document.addEventListener("DOMContentLoaded", function(){
        Array.prototype.slice.call(document.querySelectorAll("a[data-page-id='1375007']")).forEach(function(link){
        	link.href = "#xyz";
        });
});

PS: Da du nicht mit XHTML arbeitest, brauchst du auch die ganze Kommentardekoration für den Inhalt der <script>s nicht.

ES FUNKTIONIERT!

Vielen Dank dass du dich da durchgekämpft hast.... für mich sind das zwar alles Hieroglyphen - aber es macht schon irgendwie alles sinn. Ich wäre nur nie drauf gekommen...
Klasse!

 

[kkapsner]

Vielen Dank dass du dich da durchgekämpft hast

Bitte - gern geschehen.

für mich sind das zwar alles Hieroglyphen

Beschäftige dich einfach ein bisschen damit, dann wird dir schon alles klar.