مشكلة فى عرض الرسالة بعد الضغط على submit

المشكلة التي تواجهها قد تكون متعلقة بسلوك إرسال النموذج، مما قد يؤدي إلى إعادة تحميل الصفحة ومسح محتوى عنصر <h4> الذي يحمل معرّف "the-message".

كل ما عليك هو وقف السلوك التلقائى للنموذج عن طريق تعديل ملف الmain.js كالتالى:

const writing = document.getElementById("message-input")

function getMessage(event) {
    event.preventDefault();
    document.getElementById("the-message").innerHTML = writing.value
    writing.value = "";
}

وتعديل فى ملف index.html كالتالى :
 

<button class="submit" onclick="getMessage(event)"> Submit </button>
<h4 id="the-message" style="text-align: center;"></h4>

الحل انك لاتضع الفانكشن على الزرار ولكن ضعها على الفورم ككل
"onsubmit="getMessage(event)

مع ارسال ال event للفانكشن
وتغير نوع الزرار لsubmit

 <form onsubmit="getMessage(event)">
            <h1 style="text-align: center; margin-bottom: 50px; margin-top: 30px; color: rgb(145, 125, 102);"> Pass the message </h1>
            <hr>
            <div class="cont">
            <label for="message">Enter a Message :</label>
            <br>
            <button class="icon"><i class="fa-regular fa-message"></i></button>
            <input type="text" id="message-input" name="message">
            <br>
            <button type="submit" class="submit"> Submit </button>
            <h4 id="the-message" style="text-align: center;"></h4>
            </div>
        </form>

الفورم بعد الsubmit يحدث تحديث للصفحة بشكل كامل فتتحدث من جديد بسبب ذلك تختفي الرسالة
فالحل نضع 

() e.preventDefault
داخل الفانكشن
وتكون كالتالي
 

const writing = document.getElementById("message-input")

function getMessage(e) {
    e.preventDefault()
    document.getElementById("the-message").innerHTML = writing.value
    writing.value = "";
}

هذا لأن الاستمارة يتم تقديمها قبل طباعة الرسالة أصلا، ولذلك فإنك تحتاج: 

• إما تعطيل السلوك الافتراضي لزر تقديم الاستمارة، وذلك مثلما أشير إليك في التعليقات السابقة. 
• تغيير سلوك الزر من خلال توصيفه كزر button بدل زر submit، وذلك مثل التالي:

  <button type="button" class="submit" onclick="getMessage()"> Submit </button>

  .

سيكفي هذا لتلافي المشكلة.