Я не могу изменить текст, используя javascript?

Question

Я работаю над простой системой комментирования для веб-сайта с использованием почтового API. Дело в том, что я хочу дать пользователю лучшую ошибку, когда что-то пойдет не так, потому что почтовая почта изменяет только URL-адрес. Для этого я проверяю URL-адрес страницы при загрузке страницы, и если он содержит ошибку, я хочу изменить элемент на эту ошибку. Единственная проблема заключается в том, что его обнаружение работает нормально, и я также могу создать предупреждение с ошибкой, но текст не изменится ... Кто-нибудь может мне помочь с этим?

js:

    <script>
        function sending(){
            document.getElementById("submit_form").value = 'Sending...';
        };

        if (window.location.href.indexOf("err") != -1){
            alert("An error occured! Please make sure to check your input fields."); //this works fine
            document.getElementById("ertext").innerHTML = 'Error!'; //this doesnt
        };
    </script>

HTML:

                <form action="https://postmail.invotes.com/send"
                    method="post" id="email_form">

                    <h2>Feedback</h2>
                    <h4>Your Email:</h4>
                    <input type="text" name="subject" placeholder="aa@aa.aa" style="width: 80%;"/><br>
                    <h6>Your Message:</h6>
                    <textarea name="text" placeholder="Give some feedback" style="resize: none; width: 80%;"></textarea>
                    <input type="hidden" name="access_token" value="--" />

                    <input type="hidden" name="success_url" value="./comments.html" />
                    <input type="hidden" name="error_url" value="./comments.html?err=1" /><br><br>

                    <input id="submit_form" type="submit" value="Send" onclick="sending();" />

                </form> 
                <p id="ertext"></p>
                <br> <br>```

Answer 1

Код Javascript необходимо выполнить после загрузки документа html. Как упоминалось ранее, вы можете добиться этого, поместив тег скрипта где-нибудь под всеми ссылочными элементами в вашей DOM.

Другая возможность - поместить ваш JavaScript в отдельный файл «test. js», а затем включить это в заголовке вашего документа:

<script type="text/javascript" src="test.js" defer></script>

Использование атрибута defer гарантирует, что сценарий будет выполнен после завершения анализа страницы.

Answer 2

Это зависит от того, куда вы положили скрипт. Если вы поместите его перед элементом DOM, document.getElementById("ertext") не найдет элемент.

<script>
  // before the DOM element
  
  // Below line would raise TypeError: Cannot set property 'innerHTML' of null
  document.getElementById('ertext').innerHTML = location.href;
</script>
<h1 id="ertext">the element</h1>
<script>
  // after the DOM element
  
  // You'd see `the element after` which indicates 
  // the script that is after the DOM element can find the element.
  document.getElementById('ertext').innerHTML += ' after';
</script>