per Klick Inhalt in Input Textfeld übernehmen ohne id ?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

11:51, 12.10.2013

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
~~m**********n~~
12:33, 12.10.2013
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
Autor dieses Themas
ranks

ranks hat kostenlosen Webspace.
12:47, 12.10.2013
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
```
href="#"
```
springt der Browser nach oben auf die Seite,
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

~~m******e~~

13:05, 12.10.2013

<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

Autor dieses Themas
ranks

ranks hat kostenlosen Webspace.
13:18, 12.10.2013
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
```
var inhalt = obj.text;
```
im Input-Feld "undefined" an

aber mit
```
var inhalt = obj.firstChild.nodeValue;
```
klappt es :)

... 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
thomasba

Co-Admin

thomasba hat kostenlosen Webspace.
14:00, 12.10.2013

ranks schrieb:
EDIT noch ne Frage
... im <li> Element brauch ich dann doch das return false; nicht mehr,
oder ?
Nö, brauchst du nicht mehr. Durch das
```
return false;
```
wird bei dem a-Tag lediglich verhindert, dass der Browser dem Link folgt
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city