Estoy usando solo JavaScript para crear botones y necesito agregar controladores de clic a los botones que reemplazarán el encabezado con el contenido de los botones. He estado tratando de descubrir cómo hacer esto por un tiempo. ¡Cualquier ayuda sería genial! ¡Gracias!

A continuación se muestra mi código JavaScript que crea los botones y el encabezado.

var col = document.createElement('div');
col.className = 'col';
document.body.appendChild(col);

var header = document.getElementById('col');
var h = document.createElement("H3");
h.innerHTML = "Nothing clicked yet!";
col.appendChild(h);

var divOne = document.createElement('div');
col.appendChild(divOne);

var btnOne = document.getElementById('col');
var textOne = ["1", "2", "3", "4"];
textOne.forEach(function(post) {
    var postDiv = document.createElement("div");
    postDiv.className = 'btn btn-default';
    postDiv.innerHTML = post;
    col.appendChild(postDiv);
});
1
Seneca 427 11 may. 2016 a las 23:04

4 respuestas

La mejor respuesta

Agregue un evento a los elementos de su botón, pero como señalaron otras respuestas, una buena práctica es asignar ID a sus elementos para una búsqueda más precisa:

var btnOne = document.getElementById('col');
    var textOne = ["Left", "Middle", "Right"];
    textOne.forEach(function(post) {
        var btnGroupFour = document.createElement('button');
        btnGroupFour.className = 'btn btn-default';
        btnGroupFour.innerHTML = post;
        btnGroupFour.addEventListener("click", function() {
        var header = document.getElementsByTagName('H3')[0];
        header.innerHTML = this.innerHTML;
    }, false);
        divThree.appendChild(btnGroupFour);
    });
1
Goldlight 11 may. 2016 a las 20:43

Bastante simple, solo agregue un EventListener en el elemento durante la creación. Todo lo que realmente tuve que agregar a su código fue: .addEventListener ("click", function () {h.innerHTML = post;});

http://www.w3schools.com/jsref/met_element_addeventlistener.asp

<!DOCTYPE html>
<html>
<body>

<p>Hover over the checkbox to simulate a mouse-click.</p>

<script>
var divContainer = document.createElement('div');
divContainer.className = 'container';
document.body.appendChild(divContainer);

var row = document.createElement('div');
row.className = 'row';
divContainer.appendChild(row);

var col = document.createElement('div');
col.id = 'col-md-12';
row.appendChild(col);

var header = document.getElementById('col');
var h = document.createElement("H3");
h.innerHTML = "Nothing clicked yet!";
col.appendChild(h);

var star = document.createElement('div');
col.appendChild(star);

var btnStar = document.getElementById('col');
var textStar = ["Star"];
textStar.forEach(function(post) {
    var postStar = document.createElement("div");
    postStar.className = 'btn btn-default';
    postStar.innerHTML = post;
    postStar.addEventListener("click", function(){
    h.innerHTML = post;});
    col.appendChild(postStar);

});


var secondLine = document.createElement("HR");
document.body.appendChild(secondLine);
col.appendChild(secondLine);

var divOne = document.createElement('div');
col.appendChild(divOne);

var btnOne = document.getElementById('col');
var textOne = ["1", "2", "3", "4"];
textOne.forEach(function(post) {
    var postDiv = document.createElement("div");
    postDiv.className = 'btn btn-default';
    postDiv.innerHTML = post;
    postDiv.addEventListener("click", function(){
    h.innerHTML = post;});
    col.appendChild(postDiv);

});


var btnTwo = document.getElementById('col');
var textTwo = ["5", "6", "7", "8"];
textTwo.forEach(function(post) {
    var btnGroupFour = document.createElement('button');
    btnGroupFour.className = 'btn btn-default';
    btnGroupFour.innerHTML = post;
    btnGroupFour.addEventListener("click", function(){
    h.innerHTML = post;});
    col.appendChild(btnGroupFour);
});


var secondLine = document.createElement("HR");
document.body.appendChild(secondLine);
col.appendChild(secondLine);

var divThree = document.createElement('div');
col.appendChild(divThree);

var btnOne = document.getElementById('col');
var textOne = ["Left", "Middle", "Right"];
textOne.forEach(function(post) {
    var btnGroupFour = document.createElement('button');
    btnGroupFour.className = 'btn btn-default';
    btnGroupFour.innerHTML = post;
    btnGroupFour.addEventListener("click", function(){
    h.innerHTML = post;});
    divThree.appendChild(btnGroupFour);
});


</script>


</body>
</html>
0
John Lillard 11 may. 2016 a las 21:35

En primer lugar, no estás creando button s, estás creando div s, aunque estás usando las clases de botón de bootstrap (supongo ...).

De todos modos, la forma de proceder sería agregar un atributo onclick con una función de devolución de llamada, que toma un argumento: el evento en sí. Luego, con el atributo target del objeto de evento, obtendrá acceso a la etiqueta de origen del evento y con value obtendrá el valor.

Solo así:

<input type="button" id="button" value="Test Value!" />
<span id="output"></span>
<script>
    document.getElementById("button").addEventListener('click', callback);
    function callback(e) { document.getElementById("output").innerHTML = e.target.value; }
</script>
0
dlopez 11 may. 2016 a las 20:32
Just assign an ID for your header, and while creating the buttons in the loop. Just assign the onclick callback of the button, to get the id of the header, and replace the text

textOne.forEach(function(post) {
        var btnGroupFour = document.createElement('button');
        btnGroupFour.className = 'btn btn-default';
        btnGroupFour.innerHTML = post;
        btnGroupFour.onclick =  function(){document.getElementById('headerID').innerHTML = post} ;
        h.appendChild(btnGroupFour);
    });

Debería funcionar para su situación.

Una breve Demo

0
Barath Ravikumar 11 may. 2016 a las 20:33