I am currently trying to add a grid item to a grid container using form input. If anyone has any suggestions it would be very helpful.
This is my code so far :
<!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>If you have a form, use submit event and stop it from submitting
If not, use a type="button"
Also you did not use the value of the note
I suggest you wrap the note in the div and just append the HTML to the container
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>