I keep getting this error: Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML’)
or: Uncaught TypeError: Cannot set properties of null (setting ‘textContent’)
When trying to change the text of an anchor tag after a modal opens.
Here’s the modal:
<!-- Success Modal -->
<div class="modal-container" id="modal">
<div class="modal-main">
<img
src="./assets/images/icon-success.svg"
alt="success image"
/>
<h1 class="modal-header">Thanks for subscribing!</h1>
<p>
A confirmation email has been sent to
<a href="#" id="modal-email">test</a>. Please open it and
click the button inside to confirm your subscription.
</p>
</div>
<button id="dismiss-btn">Dismiss message</button>
</div>
The Form:
<form id="form">
<label for="email">Email address</label>
<input
type="email"
name="email"
id="email"
placeholder="[email protected]"
/>
<button id="button">Subscribe to monthly newsletter</button>
</form>
and the Javascript:
const form = document.getElementById("form");
const btn = document.getElementById("button");
const dismissBtn = document.getElementById("dismiss-btn");
const modal = document.getElementById("modal");
const modelEmail = document.getElementById("model-email");
form.addEventListener("submit", function (e) {
e.preventDefault();
modal.style.display = "block";
let formData = new FormData(this);
let inputValue = formData.get("email");
console.log(inputValue);
modelEmail.textContent = "example";
});
dismissBtn.onclick = function () {
modal.style.display = "none";
};
The correct value appears in the console when console logging the inputValue, but I keep getting errors when trying to change the textContent of the anchor tag in the modal. Whether I use the inputValue or [in this case] the string of “example”, I keep getting the null error.