AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • Início
  • system&network
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • Início
  • system&network
    • Recentes
    • Highest score
    • tags
  • Ubuntu
    • Recentes
    • Highest score
    • tags
  • Unix
    • Recentes
    • tags
  • DBA
    • Recentes
    • tags
  • Computer
    • Recentes
    • tags
  • Coding
    • Recentes
    • tags
Início / coding / Perguntas / 77672599
Accepted
Ninety9Balloons
Ninety9Balloons
Asked: 2023-12-17 05:36:07 +0800 CST2023-12-17 05:36:07 +0800 CST 2023-12-17 05:36:07 +0800 CST

Javascript - usando o valor de entrada do formulário dentro de um modal

  • 772

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.

javascript
  • 1 1 respostas
  • 28 Views

1 respostas

  • Voted
  1. Best Answer
    arkatsy
    2023-12-17T05:56:48+08:002023-12-17T05:56:48+08:00

    Parece que modelEmailnão faz referência ao elemento. Portanto a propriedade textContentnão existe. Pelo que posso ver, existem 2 casos:

    1. Você consulta o seu modelEmailcom 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".

    2. 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.

    • 1

relate perguntas

  • classificação de mesclagem não está funcionando - código Javascript: não é possível encontrar o erro mesmo após a depuração

  • método select.remove() funciona estranho [fechado]

  • Sempre um 401 res em useOpenWeather () - react-open-weather lib [duplicado]

  • O elemento de entrada não possui atributo somente leitura, mas os campos ainda não podem ser editados [fechado]

  • Como editar o raio do primeiro nó de um RadialTree D3.js?

Sidebar

Stats

  • Perguntas 205573
  • respostas 270741
  • best respostas 135370
  • utilizador 68524
  • Highest score
  • respostas
  • Marko Smith

    destaque o código em HTML usando <font color="#xxx">

    • 2 respostas
  • Marko Smith

    Por que a resolução de sobrecarga prefere std::nullptr_t a uma classe ao passar {}?

    • 1 respostas
  • Marko Smith

    Você pode usar uma lista de inicialização com chaves como argumento de modelo (padrão)?

    • 2 respostas
  • Marko Smith

    Por que as compreensões de lista criam uma função internamente?

    • 1 respostas
  • Marko Smith

    Estou tentando fazer o jogo pacman usando apenas o módulo Turtle Random e Math

    • 1 respostas
  • Marko Smith

    java.lang.NoSuchMethodError: 'void org.openqa.selenium.remote.http.ClientConfig.<init>(java.net.URI, java.time.Duration, java.time.Duratio

    • 3 respostas
  • Marko Smith

    Por que 'char -> int' é promoção, mas 'char -> short' é conversão (mas não promoção)?

    • 4 respostas
  • Marko Smith

    Por que o construtor de uma variável global não é chamado em uma biblioteca?

    • 1 respostas
  • Marko Smith

    Comportamento inconsistente de std::common_reference_with em tuplas. Qual é correto?

    • 1 respostas
  • Marko Smith

    Somente operações bit a bit para std::byte em C++ 17?

    • 1 respostas
  • Martin Hope
    fbrereto Por que a resolução de sobrecarga prefere std::nullptr_t a uma classe ao passar {}? 2023-12-21 00:31:04 +0800 CST
  • Martin Hope
    比尔盖子 Você pode usar uma lista de inicialização com chaves como argumento de modelo (padrão)? 2023-12-17 10:02:06 +0800 CST
  • Martin Hope
    Amir reza Riahi Por que as compreensões de lista criam uma função internamente? 2023-11-16 20:53:19 +0800 CST
  • Martin Hope
    Michael A formato fmt %H:%M:%S sem decimais 2023-11-11 01:13:05 +0800 CST
  • Martin Hope
    God I Hate Python std::views::filter do C++20 não filtrando a visualização corretamente 2023-08-27 18:40:35 +0800 CST
  • Martin Hope
    LiDa Cute Por que 'char -> int' é promoção, mas 'char -> short' é conversão (mas não promoção)? 2023-08-24 20:46:59 +0800 CST
  • Martin Hope
    jabaa Por que o construtor de uma variável global não é chamado em uma biblioteca? 2023-08-18 07:15:20 +0800 CST
  • Martin Hope
    Panagiotis Syskakis Comportamento inconsistente de std::common_reference_with em tuplas. Qual é correto? 2023-08-17 21:24:06 +0800 CST
  • Martin Hope
    Alex Guteniev Por que os compiladores perdem a vetorização aqui? 2023-08-17 18:58:07 +0800 CST
  • Martin Hope
    wimalopaan Somente operações bit a bit para std::byte em C++ 17? 2023-08-17 17:13:58 +0800 CST

Hot tag

python javascript c++ c# java typescript sql reactjs html

Explore

  • Início
  • Perguntas
    • Recentes
    • Highest score
  • tag
  • help

Footer

AskOverflow.Dev

About Us

  • About Us
  • Contact Us

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve