Actualmente estoy tratando de agregar un elemento de cuadrícula a un contenedor de cuadrícula utilizando la entrada de formulario. Si alguien tiene alguna sugerencia, sería muy útil.
Este es mi código hasta ahora:
<!DOCTYPE html> <html> <head> <script> function addNote(note) { childNumber = 1; let noteContainer = document.getElementById("grid-container"); var newNote = '<p>Child' + note + childNumber + '</p>'; noteContainer.insertAdjacentHTML("test", newNote) childNumber++; } </script> </head> <body> <style> #note { height: 200px; font-size: 14pt; } .grid-container { display: grid; grid-template-rows: repeat(1, [row] auto); grid-template-columns: repeat(4, 1fr); padding: 10px; } .grid-item { border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; font-size: 30px; text-align: center; } </style> <div class="grid-container"> <div class="grid-item"></div> </div> <div> <h2>Notes</h2> <form> <label for="Note">Add Note</label><br> <input type="text" id="note" name="Note"><br> <button onclick="addNote(note)">Submit</button> </form> </div> </body> </html>Si tiene un formulario, use el evento de envío y evite que se envíe
Si no, usa un type="button"
Ademas no usaste el valor de la nota
Le sugiero que envuelva la nota en el div y simplemente agregue el HTML al contenedor
let childNumber = 0; const noteContainer = document.getElementById("grid-container"); const note = document.getElementById("note"); document.getElementById("myForm").addEventListener("submit", function(e) { e.preventDefault(); // stop the submission var newNote = '<div class="grid-item"><p>Child ' + note.value + childNumber + '</p></div>'; noteContainer.innerHTML += newNote childNumber++; }) #note { height: 200px; font-size: 14pt; } .grid-container { display: grid; grid-template-rows: repeat(1, [row] auto); grid-template-columns: repeat(4, 1fr); padding: 10px; } .grid-item { border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; font-size: 30px; text-align: center; } <div id="grid-container"> </div> <div> <h2>Notes</h2> <form id="myForm"> <label for="Note">Add Note</label><br> <input type="text" id="note" name="Note"><br> <button>Submit</button> </form> </div>