Uncaught type error: Cannot set properties of null (Setting 'textContent)

Question

I am trying to get the user information that is written in a form to post the information provided once submitted to another HTML page.

This is the page with the form:

<form id="newBlog">

        <label for="btitle">Title of your blog</label>
        <input type="text" id="btitle" value="" placeholder="Title" required>

        <br>
        <br>

        <label for="bname">Author name</label>
        <input type="text" id="bname" value="" placeholder="Your full name" required>

        <br>
        <br>

        <textarea id="userBlog">

        </textarea>

        <br>
        <br>

        <button type="submit">
            Submit
        </button>

    </form>

    <script>
        const form = document.getElementById('newBlog');
        const blogTitle = document.getElementById('btitle');
        const authorName = document.getElementById('bname');
        const userBlog = document.getElementById('userBlog');

        form.addEventListener('submit', function(e) {
            e.preventDefault();

            const blogTitleValue = blogTitle.value;
            const authorNameValue = authorName.value;
            const userBlogValue = userBlog.value;

            localStorage.setItem('blog-title', blogTitleValue);
            localStorage.setItem('author-title', authorNameValue);
            localStorage.setItem('user-blog', userBlogValue);

            window.location.href = "index.html";
        })

And this is what is on the HTML page where the information should be posted:

    <script>
        const blogTitle = localStorage.getItem('blog-title');
        const authorTitle = localStorage.getItem('author-title');
        const userBlog = localStorage.getItem('user-blog');

        document.getElementById('b-title').textContent = blogTitle;
        document.getElementById('b-name').textContent = authorTitle;
        document.getElementById('user-Blog').textContent = userBlog;

    </script>

</body>

</html>

This is the error I got in console

I am not sure if posting the other functions of the code will help but do tell me If I need to. Thanks.

But that's an ``, you can't set its textContent. Maybe you meant to give an ID to the ``? — Barmar, Feb 27 '23 at 18:22
That error is saying it did not find the element so your id is not matching.... So there is no element with `id="b-title"` — epascarello, Feb 27 '23 at 18:28
https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — epascarello, Feb 27 '23 at 18:29
There are multiple issues here. * Are you trying to save the form data somewhere, or just pass it to another page? * Other comments have pointed out the ID mismatch -- BTW, that's the "of null" part of the error message in the console. * Once you get the IDs to match, the method you are using ("textContent") isn't valid: I think what you mean is `innerText`. Or if you are targeting an input, use `value`. — michai, Feb 27 '23 at 18:39
@Barmar So the IDs now match up and I am not sure what you mean by your second comment, but the issue still persists. asf — LightningFireZC, Feb 27 '23 at 20:09
@michai I am trying to get all the information input into the form, to show up on another HTML page. The ID's now match although the issue remains. I've also tried both InnerText and Value and neither have fixed the error. — LightningFireZC, Feb 27 '23 at 20:23
If you want to get it into the input, you need to use `.value`, not `.textContent`. `document.getElementById('btitle').value = blogTitle;` — Barmar, Feb 27 '23 at 20:27
The issue now reads 'Uncaught type error: Cannot set properties of null (Setting 'value') — LightningFireZC, Feb 27 '23 at 20:36
Correction: `.textContent` IS a valid property (I wasn't aware of it). See here for differences between `textContent` and `innerText`: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent — michai, Jul 05 '23 at 15:42

score 0 · Answer 1 · answered Feb 27 '23 at 19:05

0

Make sure your references to elements (getElementById()) match the elements' id's.
Use value instead of textContent.

answered Feb 27 '23 at 19:05

michai

460
5
8

The ID's now match but the error has changed to 'Uncaught type error: Cannot set properties of null (Setting 'value') – LightningFireZC Feb 27 '23 at 20:46
If you are putting the info into `span`s, then you need to use `.innerText()`. – michai Mar 02 '23 at 17:54
Correction: `.innerText` is a property, not a method. – michai Jul 05 '23 at 15:38

score 0 · Accepted Answer · answered Feb 28 '23 at 16:54

So the reason I was getting the error was because I didn't add a place to put the results of the form. I fixed this by adding:

<!-- Set where the new blog will be posted -->
<div>Blog Title: <br><span id="btitle"></span></div>
<div>Author Name: <br><span id="bname"></span></div>
<div>User Blog: <br><span id="userBlog"></span></div>

Thank you for all the answers and help and sorry for not seeing this before.

Uncaught type error: Cannot set properties of null (Setting 'textContent)

2 Answers2