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="[email protected]" 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 — Rob Moll
– Rob Moll, Commented May 28, 2020 at 17:19

thomsound · Accepted Answer · 2020-05-28 17:44:08Z

1

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.

answered May 28, 2020 at 17:44

thomsound

745 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Typing · Accepted Answer · 2020-05-28 17:34:33Z

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, 2020 at 17:34

Typing

1676 bronze badges

2 Comments

cj81499 Over a year ago

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. developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Stephen P Over a year ago

Hi @Typing - you are correct, but also "it depends"… I prefer and always put my scripts in the <head> 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 which fires earlier than the load event.

Collectives™ on Stack Overflow

I cant change text using javascript?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related