Hi,
ich bastle gerade an einem Theme und bin an der Stelle "comments.php". Dort möchte ich dem Textfeld ein paar Buttons hinzufügen; alles basiert auf Unobstrusively Javascript und die Anzeige funktioniert auch wunderbar in den aktuellen Browsern. Nur was die Funktionalität der Buttons angeht stehe ich vor einem Rätsel... vielleicht seht ihr ja was, was ich nicht sehe:
Code
function commentButtons() {
var oldBar = document.getElementById('xhtml-tags');
if (oldBar) {
var buttonBar = document.createElement('p');
buttonBar.setAttribute('id', 'buttonBar');
var aBtn = document.createElement('input');
aBtn.setAttribute('name', 'btn-a');
aBtn.setAttribute('id', 'btn-a');
aBtn.setAttribute('type', 'button');
aBtn.setAttribute('value', 'Link');
addClass('btn', aBtn);
aBtn.onclick = function(){ return commentButtonAction('a'); };
buttonBar.appendChild(aBtn);
var bBtn = document.createElement('input');
bBtn.setAttribute('name', 'btn-b');
bBtn.setAttribute('id', 'btn-b');
bBtn.setAttribute('type', 'button');
bBtn.setAttribute('value', 'fett');
addClass('btn', bBtn);
aBtn.onclick = function(){ return commentButtonAction('strong'); };
buttonBar.appendChild(bBtn);
var iBtn = document.createElement('input');
iBtn.setAttribute('name', 'btn-i');
iBtn.setAttribute('id', 'btn-i');
iBtn.setAttribute('type', 'button');
iBtn.setAttribute('value', 'kursiv');
addClass('btn', iBtn);
iBtn.onclick = function(){ return commentButtonAction('em'); };
buttonBar.appendChild(iBtn);
var bqBtn = document.createElement('input');
bqBtn.setAttribute('name', 'btn-bq');
bqBtn.setAttribute('id', 'btn-bq');
bqBtn.setAttribute('type', 'button');
bqBtn.setAttribute('value', 'Zitat');
addClass('btn', bqBtn);
bqBtn.onclick = function(){ return commentButtonAction('blockquote'); };
buttonBar.appendChild(bqBtn);
var cBtn = document.createElement('input');
cBtn.setAttribute('name', 'btn-c');
cBtn.setAttribute('id', 'btn-c');
cBtn.setAttribute('type', 'button');
cBtn.setAttribute('value', 'code');
addClass('btn', cBtn);
cBtn.onclick = function(){ return commentButtonAction('code'); };
buttonBar.appendChild(cBtn);
document.getElementById('comment-form').replaceChild(buttonBar, oldBar);
}
}Dabei
- fügt [FONT=Courier New]addClass(aClass, aObj)[/FONT] einem Objekt eine CSS-Klasse hinzu (dies klappt wunderbar auch an anderen Stellen im Script).
- umschließt [FONT=Courier New]commentButtonAction(aTag)[/FONT] einen in einer Textarea markierten Text mit dem übergeben Tag (auch dies klappt manuell wunderbar).
- beinhaltet das Element [FONT=Courier New]#xhtml-tags[/FONT] den von [FONT=Courier New]allowed_tags()[/FONT] ausgegeben Text und wird bei aktiviertem Javascript durch die hier generierte Button-Leiste ersetzt (was, wie oben beschrieben, auch bestens funktioniert).
Wenn ich jetzt aber auf den ersten Button ("Link") klicke, erscheint im Textfeld ein [FONT=Courier New]<strong></strong>[/FONT], während ein Klick auf "fett" gar nichts verursacht. Die anderen drei Button funktionieren.
Warum?
Langsam verzweifle ich so ein bisschen...! Danke schonmal für jede Form der Hilfe,
Dominik