• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

link per javascript erstellen

A

Antons

New member
Hallo,

über folgendes Script erstelle ich mir einen Link:

HTML: 
<form name="URLForm">
  Eingabe: <input type="text" size="20" name="URLString" />
  <br />
  <br />
  <input type="button" value="Link erzeugen" onclick="window.document.links['ZielLink'].href = 'http://www.bla.de/' + window.document.forms['URLForm'].elements['URLString'].value;">
</form>
<br />
<br />
Hier der Link:
<br />
<a href="http://www.bla.de/" name="ZielLink">Link</a>

würde aber gerne noch einen festen Teil anhängen, bzw die Eingabe nur einfügen, statt anhängen.
Leider hänge ich an dieser Stelle schon ein paar Stunden, und ich bekomme es nicht gebacken.

MfG
 
Hallo,

ich möchte an den erzeugten Link, noch /picture?type=large anhängen.

http://www.bla.de/meine Eingabe/picture?type=large

MfG
 
Zuletzt bearbeitet von einem Moderator:
Ja aber das geht doch genau wie der vordere Teil. Mit + und dann die Konstante /picture?type=large in Hochkommata ' begrenzen. Anführungszeichen kannst du hier ja nicht verwenden, weil die das äußere onclick begrenzen.
Also +'/picture?type=large' vor das Semikolon vor dem schließenden Anführungszeichen.
 
Was spricht den gegen eine separate Funktion?

Code: 
<!DOCTYPE html> 
<head>
    <title></title>
<body>    
<script type="text/javascript">   
 function LinkErzeugen(){
 	var URL = "http://www.bla.de/";
 	if(document.URLForm.URLString.value == '')return document.getElementById("Fehler").innerHTML =("Da ist was Falsch.");
 	var Eingabe = document.URLForm.URLString.value;
 	URL += Eingabe;
	//URL += Noch eine Eingabe 
	//URL += usw.
 	return document.getElementById("ZielLink").href =(URL);
 }
</script>

<form  name="URLForm" action="#" method="post" onSubmit="return false;">
  Eingabe: <input type="text" size="20" name="URLString"/>
  <br />
  <input type="button" value="Link erzeugen" onClick="LinkErzeugen();" />
</form>  

<div id="Fehler"></div>

<a id="ZielLink" href=""> </a>
</html>

Mit += kann man nicht nur Addieren sondern auch Strings zusammen bauen.
Das ist zumindest übersichtlicher.

MfG xorg1990
 
Einige Anmerkungen:

  • es gibt in JS kein onSubmit- bzw. onClick-Event. JavaScript ist im Gegensatz zu HTML case-sensitive, daher sollte es immer korrekt klein geschrieben werden.

  • zu folgender Stelle:
    Code: 
    return document.getElementById("ZielLink").href =(URL);
    Du brauchst hier weder ein return noch Klammern um die Variable "URL", genauso wie an folgender Stelle:
    Code: 
    return document.getElementById("Fehler").innerHTML =("Da ist was Falsch.");
 	var Eingabe = document.URLForm.URLString.value;


  • xorg1990 schrieb:
    Mit += kann man nicht nur Addieren sondern auch Strings zusammen bauen.
    Zum Vergrößern anklicken....
    Mit += kann man gar nicht addieren...

  • ein <form> mit return false, das keine Funktion besitzt, ist Quatsch. Du kannst es ersatzlos weglassen.

  • das HTML ist massiv invalide. Es fehlen eine charset-Angabe, der einleitende <html>-Tag, der schließende </head>-Tag und </body>-Tag.
    Ferner handelt es sich um ein HTML5-Dokument, weswegen der <input>-Tag nicht wie bei XHTML mit "/>" geschlossen wird.

  • ein leeres href-Attribut ist Quatsch. Ein Placeholder-Link ohne Attribut ist absolut valid.
    What Are HTML5 Placeholder Links For?

Mein Lösungsvorschlag:
HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>Link erzeugen</title>
  <meta charset="UTF-8">
  <script>
    function linkErzeugen(){
      var url = "http://www.bla.de/";
      var anhaengen = "/picture?type=large";
      var eingabe = document.getElementById("Eingabe").value;
      if(eingabe !== ""){
        var url = url + eingabe + anhaengen;
 	document.getElementById("ZielLink").href = url;
        document.getElementById("ZielLink").textContent = url;
      }
    }
  </script>
</head>
<body>
  <div>
    Eingabe: <input type="text" size="20" id="Eingabe">
    <input type="button" value="Link erzeugen" onclick="linkErzeugen();"><br>
    Erzeugter Link: <a id="ZielLink"></a>
  </div>
</html>

PS: ich bin kein Freund einzeiliger if-Zweige ohne geschweifte Klammern :p
 
Zuletzt bearbeitet:
Julian schrieb:
Es fehlen eine charset-Angabe, der einleitende <html>-Tag, der schließende </head>-Tag und </body>-Tag.
Zum Vergrößern anklicken....
Huch wie konnte den das passieren, wie peinlich, schäm :boxing:


Julian schrieb:
Du brauchst hier weder ein return noch Klammern um die Variable "URL", genauso wie an folgender Stelle
Zum Vergrößern anklicken....
Das wusste ich nicht.
Julian schrieb:
ein leeres href-Attribut ist Quatsch. Ein Placeholder-Link ohne Attribut ist absolut valid.
Zum Vergrößern anklicken....
Das auch nicht

Julian schrieb:
Mit += kann man gar nicht addieren...
Zum Vergrößern anklicken....
Und was dann?
Var zahl = 5;
Zahl+=5;
Zahl = 10 oder nicht?


Julian schrieb:
es gibt in JS kein onSubmit- bzw. onClick-Event. JavaScript ist im Gegensatz zu HTML case-sensitive, daher sollte es immer korrekt klein geschrieben werden.
Zum Vergrößern anklicken....
Das habe ich aus dem Adobe Dreamweaver cs4 geholt.
Adobe Dreamweaver.png


Julian schrieb:
ein <form> mit return false, das keine Funktion besitzt, ist Quatsch. Du kannst es ersatzlos weglassen.
Zum Vergrößern anklicken....
Das habe ich eingebaut, da sich sonst die Seite immer neu lädt wenn man Enter drückt.
Das ganze steht auch hier so beschrieben.
 
xorg1990 schrieb:
Var zahl = 5;
Zahl+=5;
Zahl = 10 oder nicht?
Zum Vergrößern anklicken....
Tatsächlich... Tut mir leid, das hätte ich nicht gedacht, dass das funktioniert.

xorg1990 schrieb:
Das habe ich aus dem Adobe Dreamweaver cs4 geholt.
Anhang anzeigen 4338
Zum Vergrößern anklicken....
Genau aus dem Grund nutze ich nur Notepad++ :)

xorg1990 schrieb:
Das habe ich eingebaut, da sich sonst die Seite immer neu lädt wenn man Enter drückt.
Zum Vergrößern anklicken....
Also ist bei mir (Chrome 37) nicht der Fall...
 
Mal eine generelle Frage: für was soll das denn gut sein? Wäre es nicht sinnvoller, gleich zu der zusammengebauten URL zu gehen anstatt da den Link zu erzeugen?

xorg1990 schrieb:
Das habe ich eingebaut, da sich sonst die Seite immer neu lädt wenn man Enter drückt.
Zum Vergrößern anklicken....
Wenn das <form> komplett weg ist, wird es natürlich auch nicht abgeschickt... ;)

Julian schrieb:
Tatsächlich... Tut mir leid, das hätte ich nicht gedacht, dass das funktioniert.
Zum Vergrößern anklicken....
a += b ist einfach nur eine Abkürzung für a = a + b - deswegen funktionieren natürlich auch beide Funktionen von +.
Julian schrieb:
Mein Lösungsvorschlag:
Zum Vergrößern anklicken....
Ich würde die Funktion noch klein schreiben...
 
kkapsner schrieb:
Mal eine generelle Frage: für was soll das denn gut sein?
Zum Vergrößern anklicken....
Also ich verstehe den Sinn ehrlich gesagt auch nicht...

kkapsner schrieb:
a += b ist einfach nur eine Abkürzung für a = a + b - deswegen funktionieren natürlich auch beide Funktionen von +.
Zum Vergrößern anklicken....
Ja, so gesehen macht es Sinn. Dachte, das geht nur bei Strings...

kkapsner schrieb:
Ich würde die Funktion noch klein schreiben...
Zum Vergrößern anklicken....
erledigt.
 
Hallo,

würde nochmal eure Hilfe brauchen. Habe das Script vollständig übernommen.
Habe nur noch den Button +1 hinzugefügt.
In die Textbox kommen immer Zahlen. Beim Klick auf die +1 würde ich gerne den Inhalt der Textbox +1 raufzählen.

HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>Link erzeugen</title>
  <meta charset="UTF-8">
  <script>
    function linkErzeugen(){
      var url = "http://www.bla.de/";
      var anhaengen = "/picture?type=large";
      var eingabe = document.getElementById("Eingabe").value;
      if(eingabe !== ""){
        var url = url + eingabe + anhaengen;
 	document.getElementById("ZielLink").href = url;
        document.getElementById("ZielLink").textContent = url;
      }
    }
  </script>
</head>
<body>
  <div>
    Eingabe: <input type="text" size="20" id="Eingabe">
    <input type="button" value="Link erzeugen" onclick="linkErzeugen();">   <input type="button" value="+1" onclick="linkErzeugen();"><br>
    Erzeugter Link: <a id="ZielLink"></a>
  </div>
</html>

Hat jemand noch nen Tipp für einen Anfänger ?

Gruß Anton
 
Hallo, habe es jetzt hinbekommen

HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>Link erzeugen</title>
  <meta charset="UTF-8">
  <script>
    function linkErzeugen(){
      var url = "http://www.eins.de/";
      var anhaengen = "/picture?type=large";
      var eingabe = document.getElementById("Eingabe").value;
      if(eingabe !== ""){
        var url = url + eingabe + anhaengen;
 	document.getElementById("ZielLink").href = url;
        document.getElementById("ZielLink").textContent = url;
      }
    }
  </script>
<script>
    function linkErzeugen1(){
      var url = "http://www.zwei.de/";
      var anhaengen = "/picture?type=large";
      var eingabe = document.getElementById("Eingabe").value;
      var eins = 1
      c = eingabe*1 + eins*1
      
      if(eingabe !== ""){
        var url = url + c + anhaengen;
 	document.getElementById("ZielLink").href = url;
        document.getElementById("ZielLink").textContent = url;
        document.getElementById('c').value = c;
      }
    }
  </script>
</head>
<body>
  <div>
    Eingabe: <input type="text" size="20" id="Eingabe">
    <input type="button" value="Link erzeugen" onclick="linkErzeugen();">   <input type="button" value="+1" onclick="linkErzeugen1();"><br>
    Erzeugter Link: <a id="ZielLink"></a>
  </div>
</html>

Hätte nur noch gerne, das jeder weitere klick auf +1 die Zahl erneut hinzuaddiert ?
Hat jemand eine Idee ?

MfG
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben