Continuo recebendo este erro: TypeError não capturado: não é possível definir propriedades de nulo (definindo 'innerHTML')
ou: TypeError não capturado: não é possível definir propriedades de nulo (definindo 'textContent')
Ao tentar alterar o texto de uma tag âncora após a abertura de um modal.
Aqui está o 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>
A forma:
<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>
e o 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";
};
O valor correto aparece no console ao registrar o inputValue no console, mas continuo recebendo erros ao tentar alterar o textContent da tag âncora no modal. Quer eu use inputValue ou [neste caso] a string de "exemplo", continuo recebendo o erro nulo.
Parece que
modelEmail
não faz referência ao elemento. Portanto a propriedadetextContent
não existe. Pelo que posso ver, existem 2 casos:Você consulta o seu
modelEmail
com isto:document.getElementById("model-email")
o que parece que você cometeu um erro de digitação porque no seu html o ID mais próximo disso é "modal-email".Se o erro de digitação ocorreu apenas na postagem e não no seu código, provavelmente você tentará acessar o modal antes de renderizá-lo. Por exemplo, isso acontece se você tentar acessar o modal inicialmente com js, mas não renderizar o modal até o envio. Neste caso você tem que mover a consulta dom dentro do evento, para algum lugar que seja uma garantia de que a consulta será executada após a renderização do modal.