per Klick Inhalt in Input Textfeld übernehmen ohne id ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
beispiel
brauch
browser
code
eingabe
element
ersten punkt
frage
funktion
funktioniert code
http
inhalt
input
machen
tag
test
text
url
vierter inhalt
weiterleitung
-
Hallo
ich möchte, dass bei Klick auf ein tag/element">Element (Link)
dessen Inhalt (Text) in ein Input Textfeld (Formular) übernommen wird
bisher habe ich es so, dass man zu jedem Element (Link)
eine eindeutige ID haben muss, und diese ID an Funktion übergibt.
Beispiel:
<html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> function nimm_mich(xid) { var inhalt = document.getElementById(xid).text; document.getElementById('eingabe').value=inhalt; } </script> </head> <body bgcolor="#FFFFFF" text="#000000"> <br> <br> <form name="form1" method="post" action=""> Text: <input type="text" id="eingabe" name="eingabe" size="30" maxlength="100" value=""> Send: <input type="submit" name="ok" value="OK"> </form> <br> <br> <ul> <li> <a href="javascript:nimm_mich('x1');" id="x1">aaaaaaa aaa aaaaa</a> </li> <li> <a href="javascript:nimm_mich('x2');" id="x2">bbb bbbbbbbbbb bb</a> </li> <li> <a href="javascript:nimm_mich('x3');" id="x3">cccccccc cc ccccc</a> </li> </ul> <br> <br> </body> </html>
wie kann ich es machen, dass man für die Links kein id="x1" ... usw braucht,
sondern bei Klick das Element selbst erkannt wird ... irgendwie mit this ?! ... aber wie ?
also nicht so:<a href="javascript:nimm_mich('x1');" id="x1">...</a>
sondern ohne id<a href="javascript:nimm_mich();">...</a>
Wie mauss ich die Funktion umbauen, damit es ohne Übergabe einer ID funktioniert ???
PS: ist es besser mit a href ... oder ohne Link ... mit onClick im <li> Element ?
also z.B. so<li onClick="nimm_mich();">blabla</li>
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Zum ersten Punkt:
Du kannst mit this arbeiten, indem du der Funktion this übergibst. Die ID kannst du dann weg lassen Das sähe dann so aus:
href="javascript:nimm_mich(this);"
und der JS-Code entsprechend:
function nimm_mich(el) { var inhalt = el.text; document.getElementById('eingabe').value=inhalt; }
Zum zweiten Punkt:
Ich weiß nicht, ob es wirklich einen Unterschied macht, aber ich arbeite lieber mit onclick. Du solltest dann aber dennoch entweder in den href Tag ein '#' packen oder deiner nimm_mich() funktion ein return false anhängen, damit der Browser dich nicht weiterleitet. Ersteres sähe so aus:
<a href="#" onclick="nimm_mich(this);">aaaaaaa aaa aaaaa</a>
Alternativ könntest du auch Buttons verwenden, dann musst du keine Weiterleitung eines Links abfangen.
Grüße
Mator -
Danke ... das mit onClick und this als Argument geht :)
ich frage mich nur warum das mit onClick funktioniert
<li> <a href="#" onClick="nimm_mich(this);">aaaaaaa aaa aaaaa</a> </li>
aber das mit href="javascript: nicht
<li> <a href="javascript:nimm_mich(this);">bbb bbbbbbbbbb bb</a> </li>
???
EDIT
.. aber mit
springt der Browser nach oben auf die Seite,href="#"
wäre schön, wenn man das dann auch noch verhindern kann,
... ach .. ich habs gefunden,
entweder so ... mit return false; in der onClick Anweisung
<li> <a href="#" onClick="nimm_mich(this); return false;">aaaaaaa aaa aaaaa</a> </li>
oder so ... href="javascript:void" anstatt href="#"
<li> <a href="javascript:void" onClick="nimm_mich(this);">cccccccc cc ccccc</a> </li>
dann springt der Browser nicht mehr zum Seitenanfang
:) *freu* :>)
Beitrag zuletzt geändert: 12.10.2013 12:55:07 von ranks -
<html><head><title>onclick nimm tag-inhalt</title> <script type="text/javascript"> function inf(obj) { document.getElementById('eingabe').value=obj.firstChild.nodeValue;} </script> </head><body> <a href="#" onclick="inf(this); return false;">erster Inhalt</a><br /> <a href="#" onclick="inf(this); return false;">zweiter Inhalt</a> <li onclick="inf(this); return false;">dritter Inhalt</li> <li onclick="inf(this); return false;">vierter Inhalt</li> <form name="form1" method="post" action=""> Text: <input type="text" id="eingabe" name="eingabe" size="30" maxlength="100" value=""> Send: <input type="submit" name="ok" value="OK"> </form></body></html>
> Beispiel <
Beitrag zuletzt geändert: 12.10.2013 13:56:26 von menschle -
super, vielen Dank
jetzt noch der Versuch, das ohne <a> sondern direkt im <li> Element
<li onClick="nimm_mich(this);">Test Text bla Blabla</li>
dann kommt mit
im Input-Feld "undefined" anvar inhalt = obj.text;
aber mit
klappt es :)var inhalt = obj.firstChild.nodeValue;
... geht .text nur für bestimmte TAGs wie <a> ?
EDIT noch ne Frage
... im <li> Element brauch ich dann doch das return false; nicht mehr,
oder ?
Beitrag zuletzt geändert: 12.10.2013 13:41:42 von ranks -
ranks schrieb:
Nö, brauchst du nicht mehr. Durch das
EDIT noch ne Frage
... im <li> Element brauch ich dann doch das return false; nicht mehr,
oder ?
wird bei dem a-Tag lediglich verhindert, dass der Browser dem Link folgtreturn false;
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage