相同的形式但具有不同的名称和功能

Question

我的英语不太好，但我会尽力解释我的问题。

所以我想用这个模型

  <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>

在我在输入上添加文本并按下一步后，一切都需要保持不变，而不是重定向到新页面，而是更新表单中的文本以要求新的提示。

Answer 1

首先，您必须定义函数“sendMessage”。然后在函数内部，您必须获取输入值并将其存储在变量中，然后您可以更改标题和描述的值。

    <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>