Seite 1 von 2
Javascript in HTML - Globale Variable im Body-Bereich
Verfasst: 27.10.2009, 14:50
von Fightmeyer
Hallo Leute,
ich möchte mit einem Button eine Textarea mit einem bestimmten Textbaustein befüllen. Leider will das ums Verrecken nicht klappen.
Seht ihr den Fehler?
Code: Alles auswählen
<html>
<head>
<script language="JavaScript">
var text = new array();
txt[0]="Textbaustein1";
txt[1]="Textbaustein2";
</script>
</head>
<body>
<input type="button" value="addText" onClick="this.form.textbox.value+=txt[0]">
<input type="button" value="addAnotherText" onClick="this.form.textbox.value+=txt[1]">
<textarea name="textbox" cols="120" rows="10" id="textbox"></textarea>
</body>
</html>
Wenn ich den Wert direkt angebe klappt es. Nur wenn er auf die Variablen (txt) zugreifen soll, passiert nichts.
Ist wahrscheinlich ein Syntaxproblem. Aber um ehrlich zu sein bin ich bei der JS Syntax noch nicht wirklich durchgestiegen.
EDIT: mal ne andere Frage. Wie kriegt man denn in JS ganz simpel irgendwo im Body ne vorher definierte JS-Variable ausgegeben. Also als Text in der HTML-Seite.
Re: Javascript in HTML - Globale Variable im Body-Bereich
Verfasst: 27.10.2009, 15:43
von sinus
Fightmeyer hat geschrieben:
Hm, sieht merkwürdig aus. Kann dir da aber jetzt auch nicht helfen!
Re: Javascript in HTML - Globale Variable im Body-Bereich
Verfasst: 27.10.2009, 15:54
von Beowulf
Es könnte daran liegen dass das Script oben nicht ausgeführt wird, oder am folgenden Tippfehler:
var text = new array();
Auch ist das fehlende Form-Tag im HTML-Code sehr unschön.
Re: Javascript in HTML - Globale Variable im Body-Bereich
Verfasst: 27.10.2009, 16:22
von Fightmeyer
Beowulf hat geschrieben:Es könnte daran liegen dass das Script oben nicht ausgeführt wird, oder am folgenden Tippfehler:
var text = new array();
Auch ist das fehlende Form-Tag im HTML-Code sehr unschön.
Das mit dem Tippfehler ist mir auch gerade aufgefallen. Die Variable hieß vorher tatsächlich text. Ich hab sie dann umbenannt, weil ich mir nicht sicher war ob text eventuell nicht ein reservierter begriff in JS ist. Der Fehler besteht allerdings nach wie vor, auch wenn die Variablen jetzt alle wieder gleich heißen.
Form hab ich bewußt weggelassen, weil ich es nicht abschicken will, sondern erstmal überhaupt zum Laufen kriegen möchte.
Die Syntax des Variablenaufrufs müßte eigentlich auch okay sein. Es soll ja der Wert der Textarea UND der Wert der Variable übernommen werden. (hab den Code auch blos von woanders kopiert)
Wie gesagt, wenn ich nen festen Wert eintrage, direkt im onclick klappts ja auch.
Re: Javascript in HTML - Globale Variable im Body-Bereich
Verfasst: 27.10.2009, 19:29
von Beowulf
Dann versuch mal folgendes:
Das language-Attribut ist meines Wissens optional, das type-Attribut ist viel wichtiger.
Re: Javascript in HTML - Globale Variable im Body-Bereich
Verfasst: 28.10.2009, 09:38
von Fightmeyer
Hab jetzt mal alle Hinweise berücksichtigt. Code sieht so aus:
Code: Alles auswählen
<html>
<head>
<script type="text/JavaScript">
var txt = new array();
txt[0]="Textbaustein1";
txt[1]="Textbaustein2";
</script>
</head>
<body>
<form>
<input type="button" value="addText" onClick="this.form.textbox.value+=txt[0]">
<input type="button" value="addAnotherText" onClick="this.form.textbox.value+=txt[1]">
<textarea name="textbox" cols="120" rows="10" id="textbox"></textarea>
</form>
</body>
</html>
Funktionieren tuts leider immer noch nicht.
Jemand noch ne Idee?
Re: Javascript in HTML - Globale Variable im Body-Bereich
Verfasst: 28.10.2009, 11:00
von sinus
wo kommt denn das mysteriöse "textbox" her? wurde das irgendwo definiert?
Re: Javascript in HTML - Globale Variable im Body-Bereich
Verfasst: 28.10.2009, 11:03
von Fightmeyer
Das ist der Bezeichner der Textarea.
Re: Javascript in HTML - Globale Variable im Body-Bereich
Verfasst: 28.10.2009, 11:06
von sinus
Ok, jetzt habe ichs auch gefunden. Sorry. versuchs mal mit name
edith: ich glaub eher, das problem ist, dass textarea kein value-attribut besitzt und daher der text irgendwie anders eingefügt werden müsste.
Re: Javascript in HTML - Globale Variable im Body-Bereich
Verfasst: 28.10.2009, 11:20
von Fightmeyer
Also Value an sich ist schon ein korrektes Attribut für eine textarea. Das hab ich ohne JS schon in einigen Formularen erfolgreich so verbauen können.
Re: Javascript in HTML - Globale Variable im Body-Bereich
Verfasst: 28.10.2009, 11:23
von sinus
Re: Javascript in HTML - Globale Variable im Body-Bereich
Verfasst: 28.10.2009, 11:28
von Einzelkämpfer
Re: Javascript in HTML - Globale Variable im Body-Bereich
Verfasst: 28.10.2009, 11:56
von Fightmeyer
Ich habs jetzt folgendermaßen gelöst. Hab mir einfach mal den Quelltext vom phpBB-Forum angesehen. Da muss ja es so eine Funktion geben. Wie sonst kann man hier Tags etc. einfügen?
Dabei bin ich auf eine editor.js gestoßen, die die Funktion INSERT_TEXT beinhaltet.
Code: Alles auswählen
function insert_text(text, spaces, popup)
{
var textarea;
if (!popup)
{
textarea = document.forms[form_name].elements[text_name];
}
else
{
textarea = opener.document.forms[form_name].elements[text_name];
}
if (!isNaN(textarea.selectionStart))
{
var sel_start = textarea.selectionStart;
var sel_end = textarea.selectionEnd;
mozWrap(textarea, text, '')
textarea.selectionStart = sel_start + text.length;
textarea.selectionEnd = sel_end + text.length;
}
else if (textarea.createTextRange && textarea.caretPos)
{
if (baseHeight != textarea.caretPos.boundingHeight)
{
textarea.focus();
storeCaret(textarea);
}
var caret_pos = textarea.caretPos;
caret_pos.text = caret_pos.text.charAt(caret_pos.text.length - 1) == ' ' ? caret_pos.text + text + ' ' : caret_pos.text + text;
}
else
{
textarea.value = textarea.value + text;
}
if (!popup)
{
textarea.focus();
}
}
Das dann in Kombination mit meiner HTML sieht so aus:
Code: Alles auswählen
<html>
<head>
<script type="text/javascript" src="/functions.js"></script>
</head>
<body>
<form name="eingabeformular">
<textarea name="textbox" cols="120" rows="10" id="textbox"></textarea>
</form>
<script type="text/javascript">
var form_name = 'eingabeformular';
var text_name = 'textbox';
</script>
<a href="https://www.adventure-treff.de/forum/topic/15806?view=print#" onclick="insert_text('TEXTBAUSTEIN', true); return false;">LINK</a>
</body>
</html>
Theoretisch könnte man da jetzt beliebig viele Links einbauen, die jeweils was anderes einfügen.
Re: Javascript in HTML - Globale Variable im Body-Bereich
Verfasst: 28.10.2009, 12:41
von Einzelkämpfer
So geht's natürlich auch.
Aber der Vollständigkeit halber (falls du nochmal irgendwo ein Array brauchst): mein Hinweis mit der Schreibweise gilt trotzdem. Zumindest hat es bei mir dann das getan, was es sollte. Oft hängt's ja an Kleinigkeiten.
Re: Javascript in HTML - Globale Variable im Body-Bereich
Verfasst: 28.10.2009, 12:53
von Fightmeyer
Hab die Funktion jetzt nochmal etwas verschlankt. Man übergibt jetzt außerdem auch noch den Formularnamen und den Textareanamen an die Funktion. Spart nochmal ein bissel Schreibkram in der HTML.
Code: Alles auswählen
function insert_text(text, formularbezeichnung, textfeldbezeichnung)
{
var textarea;
form_name = formularbezeichnung;
text_name = textfeldbezeichnung;
textarea = document.forms[form_name].elements[text_name];
if (!isNaN(textarea.selectionStart))
{
var sel_start = textarea.selectionStart;
var sel_end = textarea.selectionEnd;
mozWrap(textarea, text, '')
textarea.selectionStart = sel_start + text.length;
textarea.selectionEnd = sel_end + text.length;
}
else if (textarea.createTextRange && textarea.caretPos)
{
if (baseHeight != textarea.caretPos.boundingHeight)
{
textarea.focus();
storeCaret(textarea);
}
var caret_pos = textarea.caretPos;
caret_pos.text = caret_pos.text.charAt(caret_pos.text.length - 1) == ' ' ? caret_pos.text + text + ' ' : caret_pos.text + text;
}
else
{
textarea.value = textarea.value + text;
}
}
Allerdings blick ich noch nicht ganz durch, was da eigentlich genau passiert. Es wird ja der Textbaustein immer ans Ende des Feldes eingefügt. Kriegt man das auch irgendwie so umgemodelt, daß er es an die aktuelle Curserposition im Textfeld einfügt?
EDIT:
Hab jetzt noch was besseres gefunden: (funzt allerdings nur für IE)
Code: Alles auswählen
//Tags einfügen um markierten Bereich
function insert_tags(aTag, eTag, formularbezeichnung, textfeldbezeichnung) {
form_name = formularbezeichnung;
text_name = textfeldbezeichnung;
var input = document.forms[form_name].elements[text_name];
input.focus();
/* für Internet Explorer */
if(typeof document.selection != 'undefined') {
/* Einfügen des Formatierungscodes */
var range = document.selection.createRange();
var insText = range.text;
range.text = aTag + insText + eTag;
/* Anpassen der Cursorposition */
range = document.selection.createRange();
if (insText.length == 0) {
range.move('character', -eTag.length);
} else {
range.moveStart('character', aTag.length + insText.length + eTag.length);
}
range.select();
}
}
//text an Curserposition einfügen
function insert_text_into(text, formularbezeichnung, textfeldbezeichnung) {
form_name = formularbezeichnung;
text_name = textfeldbezeichnung;
var input = document.forms[form_name].elements[text_name];
input.focus();
/* für Internet Explorer */
if(typeof document.selection != 'undefined') {
/* Einfügen des Formatierungscodes */
var range = document.selection.createRange();
var insText = range.text;
range.text = text + insText;
/* Anpassen der Cursorposition */
range = document.selection.createRange();
range.moveStart('character', text.length + insText.length);
range.select();
}
}
Die Kommentarzeilen über den Funktionen sprechen denke ich für sich. Der Aufruf in der HTML sieht dann so aus:
Code: Alles auswählen
<input type="button" value="Einfügen_um_Markierung" onClick="insert_tags('[link]', '[/link]', 'eingabeformular', 'textbox')">
<input type="button" value="Einfügen_an_Curserposition" onClick="insert_text_into('TEXTBAUSTEIN', 'eingabeformular', 'textbox')">