I cant change text using javascript?

Question

Im working on a simple commenting system for a website using the postmail API. The thing is that i want to give the user a better error when something goes wrong because postmail only changes the URL. For this is i check the URL of the page when the page loads and if that contains an error i want to change a element to that error. The only problem is that detecting it works fine and i can also create a alert with the error but the text wont change... Can anyone help me with this?

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

Possible duplicate: [https://stackoverflow.com/questions/12944329/add-onclick-function-to-a-submit-button](https://stackoverflow.com/questions/12944329/add-onclick-function-to-a-submit-button) — Rob Moll, May 28 '20 at 17:19

score 1 · Answer 1 · answered May 28 '20 at 17:44

The Javascript code needs to be executed after the html document is loaded. As mentioned before you can achieve this by putting the script tag somewhere below all referenced elements in your DOM.

Another possibility is to put your JavaScript into a separate file "test.js" and then include it in the head of your document:

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

Using the defer attribute makes sure the script will be executed after the page finished parsing.

score 0 · Answer 2 · answered May 28 '20 at 17:34

0

It depends on where you put the script. If you put it before the DOM element, document.getElementById("ertext") wouldn't find the element.

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

answered May 28 '20 at 17:34

Typing

128
5

1

The script before the DOM element in question could work if the author of this question waits until the page is fully loaded using a window load event. https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event – cj81499 May 28 '20 at 17:39
Hi @Typing - you are correct, but also "it depends"… I prefer and always put my scripts in the `` and _always_ reference a `.js` file (no JS in the HTML), but wait for the page to be "ready" as cj81499 mentions — however, I prefer the [DOMContentLoaded event](https://developer.mozilla.org/docs/Web/API/Document/DOMContentLoaded_event) which fires earlier than the load event. – Stephen P May 28 '20 at 17:44

I cant change text using javascript?

2 Answers2