Intento agregar un elemento tr a un elemento tbody, funciona, pero cuando se muestra el tr, el td no está definido, NaN e indefinido. Trato de obtener el valor de los elementos de entrada y envío el tr de datos a tbody.
¿Tienen alguna idea de dónde me equivoqué?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Expense tracker remake</title> </head> <body> <h1>Expense tracker</h1> <div class="bold" id="name">Name of Item: </div> <input type="text"> <div class="bold" id="amount">Amount: </div> <input type="text"> <div class="bold" id="date">Date: </div> <input type="date"> <button id="submit">Submit</button> <button id="clear">Clear all</button> <table> <thead> <th>Name</th> <th>Amount</th> <th>Date</th> </thead> <tbody id="tbody"> </tbody> </table> <script> var tbody = document.getElementById("tbody"); var name = document.getElementById("name"); var amount = document.getElementById("amount"); var date = document.getElementById("date"); var clear = document.getElementById("clear"); var submit = document.getElementById("submit"); submit.addEventListener("click",function(){ var nameValue = name.value; var amountValue = amount.value; var dateValue = date.value; var tr = document.createElement("tr"); tr.innerHTML += "<td>"+nameValue+ " </td><td>"+ + amountValue+ "</td><td>" + dateValue+ "</td>"; tbody.appendChild(tr); console.log(name.value); }) </script>Ha agregado un + adicional en la cadena html que está utilizando para agregar el elemento tr.
tr.innerHTML += "<td>"+nameValue+ " </td><td>" + amountValue+ "</td><td>" + dateValue+ "</td>";Cometiste dos errores:
Sus elementos de name , amount y date son divs, no entradas, por lo que cuando intenta leer desde name.value , está tratando de leer desde div vacío.
Algunas palabras en javascript están reservadas y, a veces, cuando las usa, su código puede funcionar de manera extraña. Una de esas palabras es name . fuente
La demostración de trabajo de su código se puede encontrar aquí: jsFiddle.net .
Como puede ver, acabo de señalar la entrada en lugar de div (llamando a nextElementSibling porque su entrada es el siguiente elemento de su div) y cambiando los nombres de las variables para evitar conflictos de nombres. Además, eliminé los signos de más duplicados innecesarios de tr.innerHtml += ... .