Javascript Problem

Mckbrother

Haudegen

Dabei seit: 04.02.2010

Beiträge: 515

1

Dienstag, 11. Januar 2011, 22:10

Moin Moin,
ich bin momentan dabei, Formular mit BB-Codes zu schreiben.
Nun, dargestellt wird alles, nur leider funktioniert nicht alles so wie es soll

Ich vermute dass die Javascripts sich gegenseitig im Wege stehen.. Hier mal die betroffenen Dateien:

bbcodes.js:

Spoiler
Javascript-Quelltext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
function addSmileySmile() {
	document.getElementById('text').value += ':-)';
}

function addSmileySad() {
	document.getElementById('text').value += ':-(';
	}

	function addSmileyWink() {
	document.getElementById('text').value += ';-)';
	}

	function addSmileyBiggrin() {
	document.getElementById('text').value += ':-D';
	}

    function addTextB() {
	document.getElementById('text').value += '[b][/b]';
	}

	function addTextI() {
	document.getElementById('text').value += '[i][/i]';
	}

	function addTextU() {
	document.getElementById('text').value += '[u][/u]';
	}

	function addAlignLeft() {
    document.getElementById('text').value += '[left][/left]';
    }

    function addAlignCenter() {
    document.getElementById('text').value += '[center][/center]';
    }

    function addAlignRight() {
    document.getElementById('text').value += '[right][/right]';
    }

    function addFontSizeBig() {
    document.getElementById('text').value += '[big][/big]';
    }

    function addFontSizeSmall() {
    document.getElementById('text').value += '[small][/small]';
    }

    function addFontColorRed() {
    document.getElementById('text').value += '[red][/red]';
    }

    function addFontColorGreen() {
    document.getElementById('text').value += '[green][/green]';
    }

    function addFontColorBlue() {
    document.getElementById('text').value += '[blue][/blue]';
    }

    function addFontColorYellow() {
    document.getElementById('text').value += '[yellow][/yellow]';
    }

    function addFontFamilyArial() {
    document.getElementById('text').value += '[arial][/arial]';
    }

    function addFontFamilyComicSansMs() {
    document.getElementById('text').value += '[comicsansms][/comicsansms]';
    }

    function addFontFamilyTimesNewsRoman() {
    document.getElementById('text').value += '[timesnewroman][/timesnewroman]';
    }

    function addFontFamilyTahoma() {
    document.getElementById('text').value += '[tahoma][/tahoma]';
    }

    function addFontFamilyLucidaConsole() {
    document.getElementById('text').value += '[lucidaconsole][/lucidaconsole]';
    }

	function addLink() {
	alert( 'Bitte die volle Adresse des Links zwischen die [url] Tags schreiben.' );
	document.getElementById('text').value += '[url][/url]';
	}

	function addCode() {
	document.getElementById('text').value += '[code][/code]';
	}

spoiler.js:

Spoiler
Javascript-Quelltext
1
2
3
4
5
6
7
8
function ShowHideSpoiler(id){
				e = document.getElementById(id);
				if(e.style.display=="block"){
					e.style.display = "none";
				} else {
					e.style.display = "block";
				}
			}

showbbcodes.php:

Spoiler
PHP-Quelltext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?php
?>
<p>
    <a href="" onclick="ShowHideSpoiler('BBcodes');return(false)">[Formatoptionen anzeigen]</a>
    <div style="background-color: #EAEAEA; border: 1px solid #808080; width: 400px; margin-left: 39px;" id="BBcodes" style="display:none;">
                    <img src="images/bbcodes/edit-font.png" border="0" />
                    <select>
                        <option  selected="selected" >Standart</option>
                        <option onclick="addFontFamilyArial()" ><span style="font-family: Arial, Tahoma, Helvetica, Verdana, Sans-Serif;" >Arial</span></option>
                        <option onclick="addFontFamilyComicSansMs()" ><span style="font-family: Comic Sans MS, Tahoma, Helvetica, Verdana, Sans-Serif;" >Comic Sans MS</span></option>
                        <option onclick="addFontFamilyLucidaConsole()" ><span style="font-family: Lucida Console, Tahoma, Helvetica, Verdana, Sans-Serif;" >Lucida Console</span></option>
                        <option onclick="addFontFamilyTahoma()"><span style="font-family: Tahoma, Tahoma, Helvetica, Verdana, Sans-Serif;" >Tahoma</span></option>
                        <option onclick="addFontFamilyTimesNewRoman()" ><span style="font-family: Times New Roman, Tahoma, Helvetica, Verdana, Sans-Serif;" >Times New Roman</span></option>
                    </select>
                    &nbsp;&nbsp;&nbsp;
                    <img src="images/bbcodes/edit-size.png" border="0" />
                    <select>
                        <option  selected="selected" >Standart</option>
                        <option onclick="addFontSizeSmall()" ><span style="font-size: 8px;" >Klein</span></option>
                        <option onclick="addFontSizeBig()" ><span style="font-size: 16px;" >Gro&szlig;</span></option>
                    </select>
                    &nbsp;&nbsp;&nbsp;
                    <img src="images/bbcodes/edit-color.png" border="0" />
                    <select>
                        <option  selected="selected" >Standart</option>
                        <option onclick="addFontColorRed()" ><span style="color: red;" >Rot</span></option>
                        <option onclick="addFontColorGreen()" ><span style="color: green;" >Gr&uuml;n</span></option>
                        <option onclick="addFontColorBlue()" ><span style="color: blue;" >Blau</span></option>
                        <option onclick="addFontColorYellow()" ><span style="color: yellow;" >Gelb</span></option>
                    </select>
                    &nbsp;&brvbar;&brvbar;&nbsp;
                    <a href="" onclick="addAlignLeft()" ><img src="images/bbcodes/edit-alignment-left.png" border="0" /></a>
                    <a href="" onclick="addAlignCenter()" ><img src="images/bbcodes/edit-alignment-center.png" border="0" /></a>
                    <a href="" onclick="addAlignRight()" ><img src="images/bbcodes/edit-alignment-right.png" border="0" /></a>
                    &nbsp;&brvbar;&brvbar;&nbsp;
                    <a href="" onclick="addTextB()" ><img src="images/bbcodes/edit-bold.png" border="0" /></a>
                    <a href="" onclick="addTextI()" ><img src="images/bbcodes/edit-italic.png" border="0" /></a>
                    <a href="" onclick="addTextU()" ><img src="images/bbcodes/edit-underline.png" border="0" /></a>
                    &nbsp;&brvbar;&brvbar;&nbsp;
                    <a href="" onclick="addLink()" ><img src="images/bbcodes/chain.png" border="0" /></a>
                    <a href="" onclick="addCode()" ><img src="images/bbcodes/edit-code.png" border="0" /></a>
    </div>
</p>
<?php
?>

und zu guter letzt die Datei mit dem Formular:

Spoiler
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<form action="index.php?page=news&action=add_news" method="POST">
                    <table>
                        <tr>
                            <td>Titel:</td>
                            <td><input type="text" name="title" maxlength="150" size="49" /></td>
                        </tr>
                    </table>
                    <?php include('includes/system/showbbcodes.php') ?>
                    <table>
                        <tr>
                            <td>Text:</td>
                            <td><textarea cols="47" rows="10" name="text" id="text" onkeyup="count(this.value);"></textarea></td>
                        </tr>
                        <tr>
                            <td></td>
                             <td>
                                <div id="hinweistext"></div>
                                <script type='text/javascript'>
                                <!--
                                anzahlmaximal = 2500;

                                document.getElementById('hinweistext').innerHTML =  anzahlmaximal + " Zeichen sind noch übrig.";

                                function count( val ) {
	                            if (val.length > anzahlmaximal) {
		                            document.getElementById('text').value = val.substr(0, val.length-1);
		                            return true;
	                               }
	                            document.getElementById('hinweistext').innerHTML = (anzahlmaximal-val.length) + " Zeichen sind noch übrig.";
                                }

                                </script>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><input type="submit" value="Speichern" /></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><span style="font-size: 1;">Hinweis: Der Benutzername wird automatisch hinzugef&uuml;gt.</span></td>
                        </tr>
                    </table>
                </form>

Wie Ihr seht handelt es sich um ein News-System.

Soo nun zur Fehlerbeschreibung:
1)Wenn ich auf den Link zum anzeigen und verstecken der Menü-Leiste klicke, muss ich 2 mal klicken, damit das Menü sich versteckt. Außerdem soll es standartmäßig versteckt sein.
2)Wenn ich auf einen Link im Menü klicke, wird der Text einmal blitzartig in der Textarea angezeigt, danach nicht mehr.
3)In den Select-Feldern wird die Schrift nicht angezeigt wie sie angezeigt werden soll(Schriftart, Farben, Schriftgröße). Geht das mit <span> überhaupt?

Ich hoffe Ihr könnt mir helfen,
Mckbrother

EDIT: Code gespoilert und Fehlerbeschreibung hinzugefügt.

Wo kämen wir hin,
wenn jeder sagen würde:
"wo kämen wir hin",
und niemand ginge um zu schauen,
wohin wir kämen,
wenn wir gingen.

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »Mckbrother« (11. Januar 2011, 22:10)

Mckbrother

Haudegen

Dabei seit: 04.02.2010

Beiträge: 515

2

Sonntag, 16. Januar 2011, 14:45

Ich kann den Beitrag nicht mehr Editieren, deswegen der Doppelpost..
Hat wirklich keiner eine Idee?

Wo kämen wir hin,
wenn jeder sagen würde:
"wo kämen wir hin",
und niemand ginge um zu schauen,
wohin wir kämen,
wenn wir gingen.

Treml

Tripel-As

Dabei seit: 19.03.2003

Beiträge: 237

3

Sonntag, 16. Januar 2011, 16:17

Mich hatte die Aufteilung auf mehrere Dateien etwas abgeschreckt, aber das Ganze ist ja doch nicht so komplex wie ich befürchtet hatte.

Hier ein paar Ideen, die mir nach dem ersten Durchschauen gekommen sind (bis auf Punkt 3 habe ich keine getestet):

ad 1) Du hast in dem DIV mit der ID BBcodes zwei Mal das Attribut style=. Ich würde das Skript noch einmal testen, nachdem ich beide zusammengefasst habe.

ad 2) Soweit ich informiert bin, ist value nicht das richtige Schlüsselwort, um den Inhalt einer textarea anzusprechen. Ich würde es mit innerHTML oder innerText probieren. (Ganz korrekt im Sinne des DOM müsste man wahrscheinlich etwas umständlicher einen neuen Textknoten erzeugen, aber damit habe ich mich auch nie genauer befasst.)

ad 3) Wenn Du das span weglässt und Deine style-Angaben in das option-Element schreibst, sollte es funktionieren.

PS: Dein JavaScript ist stark redundant. Schöner wäre es, wenn Du für alle (bzw. die meisten) Codes nur einzelne Funktion hättest, der Du das jeweilige »Anhängsel« als Parameter übergibst.

i u t w w f c b - u y a s t m w m

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »Treml« (16. Januar 2011, 16:17)

Mckbrother

Haudegen

Dabei seit: 04.02.2010

Beiträge: 515

4

Sonntag, 16. Januar 2011, 17:25

Danke für die Antwort

1) Ich habe die Style-Angaben in eine style-Attribut gefasst, nun ist die Leiste am Anfang weg. Klicke ich jetzt aber auf ein Symbol, wird dieses in der Textarea wieder ganz kurz angezeigt, aber das war es. Gleichzeitig verschwindet die Leiste wieder

2) Es hat ja funktioniert !
3) Leider nein

Danke trotzdem für die Mühen,
Mckbrother

Wo kämen wir hin,
wenn jeder sagen würde:
"wo kämen wir hin",
und niemand ginge um zu schauen,
wohin wir kämen,
wenn wir gingen.

Javascript Problem

Javascript-Quelltext

Javascript-Quelltext

PHP-Quelltext

HTML

Ähnliche Themen