2

Estoy intentando crear solamente filas en una sola columna, cuando apretas el botón "Agregar palabra" y que cada vez que apriete el botón se me agregue la palabra que he declarado como string, cada vuelta que haga en el for se agregaría debajo de la palabra anterior pero no lo hace, me escribe todo el codigo html y no entiendo por que.

function cargarPalabra () {

    cuerpoTabla = "Palabra";
    for (i=0; i<cuerpoTabla.length; i++){
    tablaconpalabras.textContent += "<td><tr>"+ cuerpoTabla[i]+"</td></tr>";
    }


}
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agregando filas dinamicas</title>
</head>
<body>
  
    <p>Practicando filas dinamicas con javascript</p>
 
 <label for="">Agrega la palabra a la tabla</label>
    <button id="agregarJugador" onclick="cargarPalabra()">Agregar palabra</button>

    <table id="tablaconpalabras">
        <thead>
            <tr>
                <th>Palabras</th>  
            </tr>
            
        </thead>
    </table>
    


    <script src="maketeamjs.js"></script>


</body>
</html>

1 respuesta 1

4

Utilizas textContent y no interpreta el código html. Para que lo muestre como tu quieres deberías usar innerHTML.

Por otro lado, también veo que al añadir cada fila a la tabla, el tr y el td no estaban en el orden correcto.

Y por último, aunque esto no sea del todo incorrecto, si que es mejor práctica declarar los eventos desde javascript mediante addEventListener, en lugar de hacerlo desde el propio html.

Con estas pequeñas correcciones, quedaría de la siguiente manera:

// Nos aseguramos de que la ejecución de javascript sea una vez cargado el html
(function() {

  document.getElementById('agregarJugador').addEventListener('click', cargarPalabra);

}());

function cargarPalabra () {

    cuerpoTabla = "Palabra";
    
    // En este bucle cambiamos textContent por innerHTML
    for (i=0; i<cuerpoTabla.length; i++)
      tablaconpalabras.innerHTML += "<tr><td>"+ cuerpoTabla[i]+"</tr></td>";

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agregando filas dinamicas</title>
</head>
<body>
  
    <p>Practicando filas dinamicas con javascript</p>
 
 <label for="">Agrega la palabra a la tabla</label>
    <button id="agregarJugador">Agregar palabra</button>

    <table id="tablaconpalabras">
        <thead>
            <tr>
                <th>Palabras</th>  
            </tr>
            
        </thead>
    </table>
    


    <script src="maketeamjs.js"></script>


</body>
</html>

Edición tras comentario:

Si lo que se quiere es que se muestre la palabra de forma horizontal, habría que hacer una pequeña modificación y añadir únicamente los td, a demás de modificar la tabla y añadirle un colspan para que la cabecera se ajuste con el contenido. Algo así:

// Nos aseguramos de que la ejecución de javascript sea una vez cargado el html
(function() {

  document.getElementById('agregarJugador').addEventListener('click', cargarPalabra);

}());

function cargarPalabra () {

    let 
      cuerpoTabla = "Palabra",
      row = '';
    
    for (i=0; i<cuerpoTabla.length; i++)
      row += "<td>"+ cuerpoTabla[i]+"</td>";
      
    document.querySelector('#tablaconpalabras > tbody > tr').innerHTML = row;

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agregando filas dinamicas</title>
</head>
<body>
  
    <p>Practicando filas dinamicas con javascript</p>
 
 <label for="">Agrega la palabra a la tabla</label>
    <button id="agregarJugador">Agregar palabra</button>

    <table id="tablaconpalabras">
        <thead>
            <tr>
                <th colspan=7>Palabras</th>  
            </tr>
            
        </thead>
        <tbody>
          <tr></tr>
        </tbody>
    </table>
    


    <script src="maketeamjs.js"></script>


</body>
</html>

1
  • Exacto es lo que quería me había olvidado de innerHTML, la ultima duda debería cambiar el ciclo for para que me quede la "Palabra" en forma horizontal y no me queden en forma vertical?
    – Ketzell
    el 6 ene. 2021 a las 7:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.