kostenloser Webspace werbefrei: lima-city


per Klick Inhalt in Input Textfeld übernehmen ohne id ?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    ranks

    ranks hat kostenlosen Webspace.

    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>


  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. m**********n

    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
  4. Autor dieses Themas

    ranks

    ranks hat kostenlosen Webspace.

    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
  5. m******e

    <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
  6. Autor dieses Themas

    ranks

    ranks hat kostenlosen Webspace.

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

    Co-Admin Kostenloser Webspace von thomasba

    thomasba hat kostenlosen Webspace.

    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 ;-)
  8. 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

Login zum Webhosting ohne Werbung!