Solution 1 :

The method getElementById() returns an element if matches or null.
Your error is caused because you trying to access a property of an object (an HTML node) that is null (aka not found in the DOM). It’s either the property “text” or “nameText”

If you are not sure about a property of an object , you can use the Optional chaining (?.):

 this.text = document.getElementById(review)?.textContent;

(more on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining).

You could set the properties “text” and “nameText” with the optional chaining operator (they will be set to undefined if the method getElementById() doesn’t find any matches).

That being said, if you can find the id via devs tools, keep in mind that document. getElementById() accepts a string as the id. What are you passing exactly as argument of the getElementById(argument) method?
Make sure that the string does not contain a leading “#” like you would do with querySelector(selectors), check Capitalization of the string…

Solution 2 :

In addition to GBra’s answer, please note that is discouraged to reference the elements in this way. The preferred method is via a @ViewChild reference.

Problem :

Encountering this issue and not quite sure how to correct it, anyone know whats causing it?
enter image description here

These are the two areas that console is identifying.

<div class="card-footer form-inline">
                            <div class="ml-auto">
                                <button class="btn-dark" type="button" (click)="toggleEdit(review._id)">Cancel</button>
                                <button (click)="deleteReview(review._id)" class="btn-dark text-right">Delete
                                    Review</button>
                                <button class="btn-dark" type="submit">Save Changes</button>
                            </div>
                        </div>
toggleEdit(review) {
        
        if (this.edit != review) {
            this.edit = review
            this.text = document.getElementById(review).textContent;
            this.nameText = document.getElementById(review + '1').textContent;
        } else {
            this.edit = null
        }
        this.webService.editPermission()
    }

Comments

Comment posted by cjd82187

We need more context to understand whats going on. Have you tried debugging your

Comment posted by MikeOne

It’s not a good idea to do this with DOM manipulation. Consider the Angular way?

By