Suche im Forum:
Suchen


Autor Nachricht
Beitrag21.03.2012 um 15:20 (UTC)    
Titel: Text in Input-Felder eingeben und dadurch span ändern -wie?
Antworten mit Zitat
Hallo!

Mein Problem:

Ich möchte drei Input-Felder haben, in die man etwas eingeben kann.
In die ersten beiden Felder einen normalen text, in das dritte die url eines bildes.
Anschließend soll man auf einen button klicken können, der eine javascript funktion ausführt. Diese soll dann die eingegebene Sachen an einer anderen stelle einfügen, ungefähr so:

Code:
<input style="color: rgb(255, 255, 255); border: 1px solid rgb(255, 0, 0); background-color: rgb(31, 31, 31);" id="TEXT1" type="text"></br>

<input style="color: rgb(255, 255, 255); border: 1px solid rgb(255, 0, 0); background-color: rgb(31, 31, 31);" id="TEXT2" type="text">

<input style="color: rgb(255, 255, 255); border: 1px solid rgb(255, 0, 0); background-color: rgb(31, 31, 31);" id="BILD" type="text">

<input style="color: rgb(255, 255, 255); border: 1px solid rgb(255, 0, 0); background-color: rgb(31, 31, 31);" onclick="javascript:erstellen()" value="Fake-Award erstellen" type="submit">


<table style="float:left;" width="52%" border="0" cellpadding="0" cellspacing="0" bgcolor="#3A3A3A">
<tr width="318px" height="18" style="background-image:url(http://static.pennergame.de/img/pv4/icons/award_back_a.png); background-repeat:no-repeat; ">
                  <td width="7%" style="vertical-align:middle;">
                         
                               
                                    <img src="HIER SOLL DIE EINGEGEBENE URL HIN" style="border: 1px solid #111" width="15" height="18"/>
                                                   
                  </td>
                  <td width="93%" style="vertical-align:middle;"><strong>HIER SOLL DER ERSTE EINGEGEBENE TEXT HIN</strong><br/><span style="font-size: 9px; color: #666">HIER SOLL DER ZWEITE EINGEGEBENE TEXT HIN</span></td>
               </tr>
</table>



wie krieg ich das hin? Habe selber leider keine ahnung von Javascript, hoffe daher, dass mir jemand helfen kann.

PS: Wer wissen will, was das werden soll: Mit dieser Funktion soll man sich selbst bild-text-kombination für das Browsergame 'Pennergame' machen können!

LG



PS²: URL zur Seite: http://penner-items.de.tl/Fake_Award-Editor.htm
______________


Zuletzt bearbeitet von penner-items am 21.03.2012, 16:22, insgesamt einmal bearbeitet
↑
Beitrag21.03.2012 um 15:36 (UTC)    
Titel:
Antworten mit Zitat
Ist ungetestet:
Zitat:
<script type="text/javascript">
function erstellen() {
document.getElementByID('BILDID').src = document.getElementByID('BILD').value;
document.getElementByID('TEXT1ID').innerHTML = document.getElementByID('TEXT1').value;
document.getElementByID('TEXT2ID').innerHTML = document.getElementByID('TEXT2').value;
}
</script>


Wobei du den letzten Teil deines HTML-Codes noch verändern musst:
Zitat:
<img id="BILDID" src="HIER SOLL DIE EINGEGEBENE URL HIN" style="border: 1px solid #111" width="15" height="18"/>

</td>
<td width="93%" style="vertical-align:middle;"><span id="TEXT1ID"><strong>HIER SOLL DER ERSTE EINGEGEBENE TEXT HIN</strong></span><br/><span id="TEXT2ID" style="font-size: 9px; color: #666">HIER SOLL DER ZWEITE EINGEGEBENE TEXT HIN</span></td>
</tr>
</table>


Gruß,

TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
↑
Beitrag21.03.2012 um 15:42 (UTC)    
Titel:
Antworten mit Zitat
Ich liefer dir jetzt mal keine fertige Lösung sondern sag dir wie du´s machen kannst und dann kannst du mal selber rumprobieren:
Am Besten gibst du dem img, strong und span-Tag eine Id, damit man besser mit JS darauf zugreifen kann.
In der Funktion erstellen() (mehr zu Funktionen in JS findet man sicher mit Google) greift man dann mit document.getElementById("id") auf das img-Tag zu und dann kannst du mit setAttribute("src", document.getElementById("BILD").value) das Bild vertauschen.

Für die Textmanipulation kannst du dann innerText verwenden.

Noch ein paar Links:
http://de.selfhtml.org/javascript/objekte/all.htm#inner_text
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id
http://de.selfhtml.org/javascript/objekte/node.htm#set_attribute
http://de.selfhtml.org/javascript/objekte/elements.htm#value

mfg Philipp

Edit:
Ach wie nett transint doch ist Wink
______________
Forenregeln, FAQ, Suchfunktion


Zuletzt bearbeitet von philipp7 am 21.03.2012, 16:45, insgesamt einmal bearbeitet
↑
Beitrag21.03.2012 um 15:58 (UTC)    
Titel:
Antworten mit Zitat
Danke für die Mühe von euch beiden!

Aber es funktioniert leider nicht!
______________


Zuletzt bearbeitet von penner-items am 21.03.2012, 17:22, insgesamt einmal bearbeitet
↑
Beitrag21.03.2012 um 16:19 (UTC)    
Titel:
Antworten mit Zitat
Ich habs versucht...bitte sagt mir, was ich falsch mache:

Code:
<script type="text/javascript">
function erstellen() {
document.getElementByID('BILDID').setAttribute("src", document.getElementByID('BILD').value);
document.getElementByID('TEXT1ID').value = document.getElementByID('TEXT1').value;
document.getElementByID('TEXT2ID').value = document.getElementByID('TEXT2').value;
}
</script>
<form name="Formular" action="">
Oberer Text: <input type="text" id="TEXT1" style="color: rgb(255, 255, 255); border: 1px solid rgb(255, 0, 0); background-color: rgb(31, 31, 31);" /><br />
Unterer Text: <input type="text" id="TEXT2" style="color: rgb(255, 255, 255); border: 1px solid rgb(255, 0, 0); background-color: rgb(31, 31, 31);" /> <br />
Bild-URL: <input type="text" name="bild" id="BILD" style="color: rgb(255, 255, 255); border: 1px solid rgb(255, 0, 0); background-color: rgb(31, 31, 31);" />  <input type="submit" value="Fake-Award erstellen" onClick="erstellen()" style="color: rgb(255, 255, 255); border: 1px solid rgb(255, 0, 0); background-color: rgb(31, 31, 31);" /></form><br /><br /><br />
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#3A3A3A" width="52%" style="float:left;">
    <tbody>
        <tr height="18" style="background-image:url(http://static.pennergame.de/img/pv4/icons/award_back_a.png); background-repeat:no-repeat; " width="318px">
            <td width="7%" style="vertical-align:middle;"><img id="BILDID" src="" style="border: 1px solid #111" width="15" height="18"/>

</td>
<td width="93%" style="vertical-align:middle;"><strong id="TEXT1ID"></strong><br/><span id="TEXT2ID" style="font-size: 9px; color: #666"></span></td>
</tr>
</table>

______________
↑
Beitrag21.03.2012 um 17:57 (UTC)    
Titel:
Antworten mit Zitat
Mein Fehler... span-Elemente haben natürlich kein value-Attribut Rolling Eyes
penner-items hat Folgendes geschrieben:
Code:
<script type="text/javascript">
function erstellen() {
document.getElementByID('BILDID').setAttribute("src", document.getElementByID('BILD').value);
document.getElementByID('TEXT1ID').innerText = document.getElementByID('TEXT1').value;
document.getElementByID('TEXT2ID').innerText = document.getElementByID('TEXT2').value;
}
</script>
<form name="Formular" action="">
Oberer Text: <input type="text" id="TEXT1" style="color: rgb(255, 255, 255); border: 1px solid rgb(255, 0, 0); background-color: rgb(31, 31, 31);" /><br />
Unterer Text: <input type="text" id="TEXT2" style="color: rgb(255, 255, 255); border: 1px solid rgb(255, 0, 0); background-color: rgb(31, 31, 31);" /> <br />
Bild-URL: <input type="text" name="bild" id="BILD" style="color: rgb(255, 255, 255); border: 1px solid rgb(255, 0, 0); background-color: rgb(31, 31, 31);" />  <input type="submit" value="Fake-Award erstellen" onClick="erstellen()" style="color: rgb(255, 255, 255); border: 1px solid rgb(255, 0, 0); background-color: rgb(31, 31, 31);" /></form><br /><br /><br />
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#3A3A3A" width="52%" style="float:left;">
    <tbody>
        <tr height="18" style="background-image:url(http://static.pennergame.de/img/pv4/icons/award_back_a.png); background-repeat:no-repeat; " width="318px">
            <td width="7%" style="vertical-align:middle;"><img id="BILDID" src="" style="border: 1px solid #111" width="15" height="18"/>

</td>
<td width="93%" style="vertical-align:middle;"><strong id="TEXT1ID"></strong><br/><span id="TEXT2ID" style="font-size: 9px; color: #666"></span></td>
</tr>
</table>


Gruß,

TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
↑
Beitrag22.03.2012 um 17:03 (UTC)    
Titel:
Antworten mit Zitat
Klappt leider immer noch nicht Sad

Der Text, den ich eingebe, wird nicht übernommen!
Für die Bild-url habe ich folgendes bild genommen: http://static.pennergame.de/img/pv4/icons/awards/802.gif

Klicke ich dann auf den Button, erhalte ich folgende neue Adresse:

http://penner-items.de.tl/Fake_Award-Editor.htm?bild=http%3A%2F%2Fstatic.pennergame.de%2Fimg%2Fpv4%2Ficons%2Fawards%2F802.gif
______________
↑
Beitrag22.03.2012 um 17:15 (UTC)    
Titel:
Antworten mit Zitat
Ich weiß nicht genau woran das liegt, aber ich würd mal folgendes löschen:
Code:
<form name="Formular" action="">

und
Code:
</form>


Wenns dann noch nicht geht in den Javascript-Code zum Beispiel mal ein
Code:
alert(document.getElementByID('TEXT1').value);

etc. einfügen und mal schaun, ob du überall Werte bekommst.

mfg philipp
______________
Forenregeln, FAQ, Suchfunktion
↑
Beitrag22.03.2012 um 17:24 (UTC)    
Titel:
Antworten mit Zitat
philipp7 hat Folgendes geschrieben:
Ich weiß nicht genau woran das liegt, aber ich würd mal folgendes löschen:
Code:
<form name="Formular" action="">

und
Code:
</form>


Wenns dann noch nicht geht in den Javascript-Code zum Beispiel mal ein
Code:
alert(document.getElementByID('TEXT1').value);

etc. einfügen und mal schaun, ob du überall Werte bekommst.

mfg philipp


Habe die <form>-Tags entfernt...immer noch nicht geklappt...dann habe ich dein alert eingefügt...beim klick auf button ist einfach nichts passiert Sad
______________
↑
Beitrag22.03.2012 um 17:29 (UTC)    
Titel:
Antworten mit Zitat
Hallo,

im Firefox wird das alleine schon daran scheitern, da er innerText nicht kennt.
Verwende die DOM-Methoden und lese den Textknoten über nodeValue aus.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
↑
Beitrag22.03.2012 um 17:31 (UTC)    
Titel:
Antworten mit Zitat
o-4-n hat Folgendes geschrieben:
Hallo,

im Firefox wird das alleine schon daran scheitern, da er innerText nicht kennt.
Verwende die DOM-Methoden und lese den Textknoten über nodeValue aus.


Habe doch oben schon geschrieben, dass ich davon keine ahnung habe Sad

Und selbst wenn er innerText nicht kennt, müsste er doch das Bild ändern, oder nicht?
______________
↑
Beitrag22.03.2012 um 17:44 (UTC)    
Titel:
Antworten mit Zitat
penner-items hat Folgendes geschrieben:
Und selbst wenn er innerText nicht kennt, müsste er doch das Bild ändern, oder nicht?

Aber nur, wenn man auch die richtigen Methoden verwendet. Das d bei getElementById wird klein geschrieben.

penner-items hat Folgendes geschrieben:
Habe doch oben schon geschrieben, dass ich davon keine ahnung habe

Wenn man Dinge haben möchte, die man sich selbst nicht erstellen kann, ist man im Supportbereich falsch. Dann muss man sich jemanden suchen, der das für einen macht. Daher verschiebe ich mal nach ich suche.
Wenn du konkrete Fragen hast, helfe ich dir gerne weiter.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
↑
Beitrag22.03.2012 um 17:59 (UTC)    
Titel:
Antworten mit Zitat
TAUSEND DANK EUCH ALLEN!

Transint und Phillipp7 für die Codes und dir o-4-n für den Hinweis, dass es klein geschrieben wird! ES GEHT Smile Smile Smile
______________
↑
Beiträge der letzten Zeit anzeigen:   
  • Seite 1 von 1

  •  
    • Gehe zu:  


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de

© 2025 webme GmbH, Deutschland. Alle Rechte vorbehalten.