Html Button mit JavaScript ausführen


janS

Neues Mitglied
Hallo Leute,
ich hätte da nochmal ein Anliegen, Ich habe mit Bootstrap vier Buttons erstellt und möchte diese nun nicht viermal da hinschreiben sondern mit JavaScript 4 mal ausführen lassen.
Ist das do ertsmal möglich oder ist die idee kompletter Schwachsinn?
Hier erstmal wie ich das vorher gelöst habe:
HTML:
<button type="button" id="Test" class="btn col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-1"><p id="xsmall1"></p></button>
        <button type="button" id="Test" class="btn col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-2"><p id="xsmall2"></p></button>
        <button type="button" id="Test" class="btn col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-1"><p id="xsmall3"></p></button>
        <button type="button" id="Test" class="btn col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-2"><p id="xsmall4"></p></button>
Und jetzt wie meine Idee ist mit nur einem button:
HTML:
HTML:
<button type="button" id="btnxs" class="btn col-xs-8 col-xs-offset-2 "></button>
JavaScript:
Java:
for(var i = 0; i < 4; i++){
        document.getElementById('btnxs').innerHTML = "TestTestTest";
    }
Ist das so möglich oder vertue ich mich da komplett.
Danke für die Hilfe schonmal im vorraus.
MfG Jan
 

Hinweis: Wenn du jetzt Java lernen möchtest, dann schau dir diese kurze Präsentation hier an (hier klicken!)
Sichere dir hier den Zugriff auf umfangreiches Java-Know How und starte richtig durch!

Hinweis: Wenn du jetzt Java lernen möchtest, dann schau dir diese kurze Präsentation hier an (hier klicken!)
Sichere dir hier den Zugriff auf umfangreiches Java-Know How und starte richtig durch!

janS

Neues Mitglied
Tut mir leid mit dem falschen Forum hab ich zuspät gemerkt.

Ich habe vier Buttons erstellt so wie im ersten Code. Jetzt möchte ich das ich das selbe Ergebnis nur mit anderem Code erziele und am besten mit einer Schleife in JS, so das diese Schleife jedes mal den einen erstellten Button neu aufruft und anzeigt.
 

mihe7

Bekanntes Mitglied
HTML:
<!DOCTYPE html>
...
<body>
<div id="buttons"></div>
</body>
Javascript:
function createButton(text) {
    var btn = document.createElement("button");
    btn.className = "btn col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-1";
    btn.innerText = text;
    return btn;
}

function addButtons() {
    var container = document.getElementById("buttons");
    for (var i = 0; i < 4; i++) {
        container.appendChild(createButton("Test" + (i+1)));
    }
}
So ähnlich sollte das funktionieren.
 

janS

Neues Mitglied
Danke für die schnelle Anwort. Ich habe selber auch noch weiter gegoogelt und auch append gefunden und mich damit probiert. Funktioniert jetzt einwandfrei.
 

Passende Stellenanzeigen aus deiner Region:


Neue Themen

Oben