My goal is to create a lengthy form with many input fields. The various input fields will be shown in modals that popup. After the input and closing the modal the value should be visible on the page.
Currently the value is shown via the use of innerHTML when I debug the code. By closing the modal the value is gone.
What am I doing wrong?
<!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>Document</title>
<style>
div.modal {
display: none;
}
.gc-f2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 3px;
padding: 5px;
}
.gc-f2>button {
text-align: left;
padding: 5px;
font-size: 20px;
background-color: lightsalmon;
padding: 5px;
}
.gc-f2>div.rc {
background-color: white;
/* font-family: Helvetica; */
color: blue;
font-size: 20px;
padding: 5px;
border: medium solid green;
x§
}
.modal {
/* rename to modal? */
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 70px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #4b4646;
float: right;
font-size: 34px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* kan weg */
.form-one {
display: grid;
/* grid-template-columns: 1fr 1fr; */
font-size: 24px;
/* grid-template-columns: 350px 500px; */
grid-template-columns: auto auto;
grid-gap: 9px;
padding: 15px;
}
input {
display: block;
width: 95%;
border: medium solid green;
font-size: 24px;
}
input:focus {
background-color: lightgoldenrodyellow;
}
</style>
<script>
function showForm(theForm) {
// Hide all other forms
document.querySelectorAll('div.modal').forEach(myForm => {
myForm.style.display = 'none';
});
// Show requested forms
document.querySelector(`#${theForm}`).style.display = 'block';
}
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('button').forEach(button => {
if (button.hasAttribute("data-button")) {
button.onclick = function () {
showForm(this.dataset.button);
};
};
});
});
function closeForm(theForm) {
// Hide all other forms
document.querySelectorAll('div.modal').forEach(div => {
div.style.display = 'none';
});
// Show requested forms
document.querySelector(`#${theForm}`).style.display = 'none';
}
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('span').forEach(closingCross => {
closingCross.onclick = function () {
closeForm(this.dataset.close);
};
});
});
var modal = document.querySelector('.modal')
window.addEventListener('keydown', function (event) {
if (event.key === 'Escape') {
document.querySelectorAll('div.modal').forEach(div => {
div.style.display = 'none';
});
}
})
function testVariable() {
debugger
const strText = document.getElementById("theName").value;
console.log("dit is strText: " + strText);
document.getElementById("showName").innerHTML = `${strText}`;
}
</script>
</head>
<body>
<div class="gc-f2">
<button data-button="nameButton" class="lc">Push button to fill in your name:</button>
<div class="modal" id="nameButton">
<div class="modal-content">
<span data-close="nameButton" class="close" accesskey="esc">×</span>
<form class="form-container">
<div class="form-one">
<div>Name</div>
<div><input type="text" placeholder="Name" name="theName" id="theName" required></div>
</div>
<button onclick="testVariable()">Save</button>
</form>
</div>
</div>
<div class="rc" id="showName"></div>
</div>
</body>
</html>