nicht angemeldet
TextArea value auslesen und in CSS button einfügen?
0 0 0 0 0 0 
Struppi
0
0
TextArea value auslesen und in CSS button einfügen?
Gute Abend wünsch ich euch,
Also ich komm gleich mal zur Sache...Ich lern seid kurzer Zeit JS und habe doch noch große Probleme damit.
Ich habe von meinem Ausbilder die Übungsaufgabe bekommen einen button zu erstellen mit hilfe von CSS was auch wunderbar geklappt hat...
darunter habe ich eine textarea gestellt in der ich 20Zeichen eingeben kann.Und darunter nochmal einen <input type="button"> erstellt.
Was ich möchte....also folgendes...ich will das wenn ich in die Textarea etwas eingebe der Text aus der Area in eine Variable gespeichert wird...und diese dann im oben per CSS erstellten button wiedergegeben wird...Also ich will praktisch nur das der Text aus der TextArea nach dem klick auf den button im oberen Button drinsteht...Nun die Frage wie kriege ich das hin...
Mit C# kommt mir das soviel leichter vor...und ich tu mich mit JS doch beträchtlich schwerer...Hätte jemand eine Idee wie ich das wirklich ganz leicht hinkriegen könnte?In Anfänger sprache erklärt :)
Ich weis praktisch nur...das ich das per onclick="" machen muss...
ich weis leider nicht wie ich den Wert in eine Variable abspeichern kann und wie ich ihm dann sagen kann das er es mir in den button reinschreibt anstatt des textes der schon vorhanden ist...
Was ich bisher habe ist folgendes:
<html>
<head>
<style type="text/css">
tr.linkcell
{
border-style: none;
}
td.linkimgcell
{
border-style: outset;
border-width: 3px;
border-color: #ffff44;
border-right-style: none;
border-rigth-width: 0px;
text-align: center;
vertical-align: middle;
padding: 5px;
padding-left: 5px;
padding-right: 5px;
background-color: #ffff44;
}
td.linktextcell
{
border-style: outset;
border-width: 3px;
border-color: #d0d0d0;
background-color: #d0d0d0;
border-left-style: none;
border-left-width: 0px;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
font-family: Arial,Helvetica;
font-weight: bold;
font-size: 100%;
letter-spacing: 0.3em;
}
a.linkbutton
{
border-style: outset;
border-width: 3px;
border-color: #ffff44;
background-color: #ffff44;
color: #000000;
padding: 0px;
vertical-align: middle;
font-family: Arial,Helvetica;
}
</style>
//<link rel="stylesheet" type="text/css" href="button.css">
//<script src="button.js" type="text/javascript"></script>
</head>
<body>
<table border="0" cellspacing="0">
<tr class="linkcell">
<td class="linkimgcell" id="cimg">
<a href="innerhtml.html">
<img src="img/pfeil_positiv.gif" border="0">
</a>
</td>
<td class="linktextcell">
<form name="ZuÄndernderText">
Ändert den Text
</form>
</td>
</tr>
</table>
<table>
<tr>
<td>
<form name="Texttausch" action="">
<input name="NeuerText" type="text" size="30" maxlength="20">
<input type="button" value="Text ändern" onclick="TextTausch();">
</form>
</td>
</tr>
</table>
</body>
</html>
in dem eingebundenen JS file ist praktisch nur der name der funktion und mehr eigendlich nicht...Ich weis grad nich so recht weiter,wenn mir da jemand helfen könnte wäre das wirklich nett...
Gruß m0jo
-
Hallo,
Dein HTML sieht ja dann so aus:
<input id="mybutton" type="button" value="Anfangswert"> <textarea id="mytext"></textarea> <input onclick="kopiere();" type="button" value="los">beim klicken löst du die Funktion kopiere() aus, die dann die ganze arbeit übernimmt. Diese Funktion musst du irgendwo hinschreiben, entweder in den Head der HTML Datei oder in eine externe .js Datei.
Um an den Inhalt der Textarea zu kommen gehst du einfach über das DOM und getElementById(); drauf und speicherst das in einer Variable. Wenn du schon an der Textarea bist kannst du mit value auf deren Inhalt zugreifen.
var inhalt = document.[link:http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=getElementById]("mytext").[link:http://de.selfhtml.org/javascript/objekte/elements.htm#value@title=value];So weit so gut. Jetzt machst du nur noch das gleiche aber umgekehrt, du gehst über das DOM und greifst auf das value des oberen Buttons zu, und da weist du dann den Inhalt der Variable inhalt zu.
Wenn du Fragen hast immer her damit.
Grüße
Jeena Paradies-
<script type="javascript/text">
function kopiere()
{
var inhalt = document.getElementById("mytext").value
document.getElementById("mybutton").value = inhalt
}
</script><form name="Texttausch" action="">
<input id="mybutton" type="button" value="Anfangswert">
<textarea type="text" id="mytext" size="15" maxlength="10"></textarea>
<input onclick="kopiere();" type="button" value="los">
</form>so sieht das bei mir jetzt aus...Aber das funktioniert so nicht...
ich würde mich aber auch lieber statt dem :
<input id="mybutton" type="button" value="Anfangswert">auf meinen CSS button beziehen...ich müsste also doch nur der Form oben in meinem button eine ID zuordnen und diese dann praktisch in document.getElementById("CSSbutton").value=inhalt angeben oder?Aber wieso funktioniert das nicht so wie gewollt?
p.s. danke Jeena für die super erklärung :)
-
Hallo,
var inhalt = document.getElementById("mytext").value
document.getElementById("mybutton").value = inhaltin der ersten Zeile fehlt ein ; das könnte auch erklären warum es nicht funktioniert. Empfehlenswert ist es in die JavaScriptkonsole des browsers (am besten ist da die vom Firefox) zu schauen. Dort stehen dann auch viele Fehler die man gemacht hat ;-)
ich würde mich aber auch lieber statt dem :
<input id="mybutton" type="button" value="Anfangswert">
auf meinen CSS button beziehen...Könntest du bitte definieren was ein "CSS-Button" ist? Ich kann mir da jetzt rein gar nichts darunter vorstellen.
Grüße
Jeena Paradies-
Unter CSS button meinte ich nicht wirklich einen button...sondern mehr oder weniger genau das :
<style type="text/css">
tr.linkcell
{
border-style: none;
}td.linkimgcell
{
border-style: outset;
border-width: 3px;
border-color: #ffff44;border-right-style: none;
border-rigth-width: 0px;text-align: center;
vertical-align: middle;
padding: 5px;
padding-left: 5px;
padding-right: 5px;
background-color: #ffff44;
}td.linktextcell
{
border-style: outset;
border-width: 3px;
border-color: #d0d0d0;
background-color: #d0d0d0;border-left-style: none;
border-left-width: 0px;padding: 5px;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
font-family: Arial,Helvetica;
font-weight: bold;
font-size: 100%;
letter-spacing: 0.3em;
}a.linkbutton
{
border-style: outset;
border-width: 3px;
border-color: #ffff44;
background-color: #ffff44;
color: #000000;padding: 0px;
vertical-align: middle;
font-family: Arial,Helvetica;
}
</style><table border="0" cellspacing="0">
<tr class="linkcell">
<td class="linkimgcell" id="cimg">
<img src="img/pfeil_positiv.gif" border="0">
</td>
<td class="linktextcell">
<form id="newText">Ändert den Text</form>
</td>
</tr>
</table>Es ist weniger ein button an sich...Es soll eben nur einen button darstellen...ich hatte mich wohl unklar ausgedrückt sorry :)
Erklären ist nicht meine stärke...Nunja ich habe das ; hingemacht aber es funktioniert trotzdem nicht.Leider kenne ich mich mit der MEthode die Thomas da anwendet nicht so gut aus...ich habs zwar so hinbekommen das es meinen "button" text ändert aber das is mir doch schon bishen zu komplex für den Anfang.Gruß
-
-
Dann solltest du anstatt value dir mal innerText anschauen.
was aber nicht in Mozillabrowsern funktioniert, dort muss man z.b. auf firstChild.data zugreifen
Struppi.
--
Javascript ist toll (Perl auch!)
-
-
-
Hallo Jeena.
var inhalt = document.getElementById("mytext").value
document.getElementById("mybutton").value = inhalt
in der ersten Zeile fehlt ein ;Nein, Semikola sind in JS grundsätzlich optional, wenn Anweisungen auf einer eigenen Zeile notiert werden. Der Sauberkeit halber sollte man sie aber dennoch notieren.
Einen schönen Dienstag noch.
Gruß, Mathias
--
ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)
debian/rules-
Hallo,
Nein, Semikola sind in JS grundsätzlich optional, wenn Anweisungen auf einer eigenen Zeile notiert werden. Der Sauberkeit halber sollte man sie aber dennoch notieren.
Ah vielen Dank für die Info, das war mich nicht bewusst.
Grüße
Jeena Paradies
-
-
-
-
-
Oder auch, unter Verwendung von
node.replaceChild(), mit z.B. einer Tabellenzelle als "Button".Siehe auch: [ref:self811;javascript/objekte/node.htm#replace_child] [ref:self811;javascript/objekte/htmlelemente.htm] (für per JS änderbare Eigenschaften der HTML-Elemente)
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" > <head> <title>Texttausch</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript"> /* <![CDATA[ */ function button_text(text) { var new_text = document.createTextNode(text); document.getElementById("mybutton").replaceChild(new_text, document.getElementById("mybutton").firstChild); } /* ]]> */ </script> </head> <body> <table> <tr> <td id="mybutton">Anfangswert</td> </tr> </table> <form action="." method="get"> <p> <label for="mytext">neuer Text:</label><br /> <textarea id="mytext" rows="3" cols="20"></textarea><br /> <input type="button" value="kopieren" onclick="button_text(document.getElementById('mytext').value);"> </p> </form> </body> </html>Bis denn dann,
Thomas