我无法使用 javascript 更改文本？

Question

我正在使用 postmail API 为网站开发一个简单的评论系统。问题是我想在出现问题时给用户一个更好的错误，因为 postmail 只会更改 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>