my english is not so good but I'll try my best to explain my problem.
So i want to use this model
<h1 id="modal-title" class="unlock-page__title" style="text-align: center;">Tittle</h1>
<div id="modal-description" style="color: rgb(174, 174, 174); text-align: center; white-space: pre-line; margin-top: 5px;">middle text</div>
<div style="margin: 80px 0 8px;">
<input id="modal-input" type="text" placeholder="name">
</div>
<div id="modal-submit" onclick="sendMessage()" class="bg-blue white btn">next</div>
And after i add a text on input and press next, everything needs to remain the same and not redirect to a new page, but update the text in the form to ask for a new prompt.
First, you have to define the Function 'sendMessage'. Then inside the function you have to fetch the input value and store it in a variable, then you can change the value of the title and the description.
<h1 id="modal-title" class="unlock-page__title" style="text-align: center;">Tittle</h1>
<div id="modal-description" style="color: rgb(174, 174, 174); text-align: center; white-space: pre-line; margin-top: 5px;">middle text</div>
<div style="margin: 80px 0 8px;">
<input id="modal-input" type="text" placeholder="name">
</div>
<div id="modal-submit" onclick="sendMessage()" class="bg-blue white btn">next</div>
<script>
let title = document.getelementbyid('modal-title').value;
function sendMessage(){
let inputText = document.getelementbyid('modal-description').value;
document.getElementById('modal-title').value = inputText;
}
</script>