Button mit JavaScript dynamisch einfügen

[CWarrior]

Button mit JavaScript dynamisch einfügen

Hi Leute
Ich benutze Greasemonkey und würde damit gerne auf einer Webseite einen Button einfügen. Das wäre an sich noch kein Problem. Ich mache mit

var myButton = document.createElement("button");

einfach einen neuen Button und hänge ihn mit

document.getElementById("meinDiv").appendChild(myButton);

an dem auf der Webseite bereits vorhandenen div "meinDiv" ein.
Soweit so gut. Nun würde ich aber dem Button gerne noch einige Attribute zuweisen wie zum Beispiel den value oder das onClick()-Ereignis. Ich habe ziemlich lange gesucht und herausgefunden, dass man gewisse Eigenschaften eines Buttons auf diese Weise ändern kann:

myButton.setAttribute('id', 'neuerButton');

Allerdings muss man, um den Text auf dem Button zu ändern, zuerst einen Textknoten erstellen und ihn dann an den Button hängen:

var buttontext = document.createTextNode('Schriftart ändern');
myButton.appendChild(buttontext);

Wieso kann ich den Text auf dem Button nicht einfach so:

myButton.setAttribute('value', 'Hier klicken!');

oder so:

myButton.value = "Hier klicken!";

ändern?

Würde mich über Antworten freuen!
Gruss
invrecon

 

[CWarrior]

AW: Button mit JavaScript dynamisch einfügen

Hat sich erledigt!

 

[Fragile Heart]

AW: Button mit JavaScript dynamisch einfügen

Ich habe zwar nicht viel Ahnung von Java Script, aber ich bin dennoch Neugierig, was hast du denn herraus gefunden?

 

[CWarrior]

AW: Button mit JavaScript dynamisch einfügen

Ich habe jetzt geschafft was ich wollte. Mein Greasemonkey-Script funktioniert in Chrome wunderbar, wirft in Firefox aber immer ein "Component is not available". Es macht folgendes:
Es generiert einen neuen Button mit einem Text darauf, setzt seine Id und wenn der Button geklickt wird, injiziert es ein Javascript in die Seite, das in einer sehr langen Schleife ganz viel mal das auf der Seite bereits vorhandene Script ShowHint aufruft. Das Script wird in die Seite injiziert, ausgeführt und gleich danach wieder entfernt. Hier der Code:

var myButton = document.createElement("button");
var Text = document.createTextNode("Lösungen");
myButton.appendChild(Text);
myButton.setAttribute("id", "SolutionButton");
myButton.onclick = function() {
var script = document.createElement('script');
script.setAttribute("type", "application/javascript");
script.textContent = "for (var i = 0; i < 300; i++) {ShowHint();}";
document.body.appendChild(script);
document.body.removeChild(script);
}
document.getElementById("InstructionsDiv").appendChild(myButton);

Weshalb es in FF nicht funktioniert, weiss ich jetzt. Greasemonkey unterstützt die on(event) - Schreibweise nicht. Ich benutze Chrome und da es Greasemonkey für Chrome nicht gibt, benutze ich eine kompatible Alternative. Die unterstützt diese Schreibweise offenbar, und deshalb funzts in Chrome. Jetzt bräuchte ich nur noch eine Alternative zu on(event). Da ich Anfänger in JS bin, habe ich keine Ahnung, was ich da verwenden könnte.

Gruss
invrecon

 

[CWarrior]

AW: Button mit JavaScript dynamisch einfügen

Jetzt hab ichs! Ich habe einen Weg gefunden, on(event) zu umgehen. Hier der Code:

var myButton = document.createElement("button");
var Text = document.createTextNode("Lösungen");
myButton.appendChild(Text);
myButton.setAttribute("id", "SolutionButton");
myButton.addEventListener("click", function()
{
var script = document.createElement('script');
script.setAttribute("type", "application/javascript");
script.textContent = "for (var i = 0; i < 300; i++) {ShowHint();}";
document.body.appendChild(script);
document.body.removeChild(script);
}, false);
document.getElementById("InstructionsDiv").appendChild(myButton);

 

[asdfqwertz98]

AW: Button mit JavaScript dynamisch einfügen

so funktionierts auch:
var myButton = document.createElement("input");
myButton.setAttribute("type", "button");
myButton.setAttribute("value", "Lösungen");
myButton.setAttribute("onclick", "javascript:function()");

 

[Rho]

AW: Button mit JavaScript dynamisch einfügen

Nekrophil?