Início / coding / Perguntas / 79560759
Accepted
Jose Serra
Asked: 2025-04-08 04:44:25 +0800 CST

Botões ao clicar funcionam com o mesmo ID e atributos diferentes

  • 772

Tenho uma página HTML com um exemplo de botões, como mostrado, parte de um aplicativo Django que preenche o nome e a cidade após inserir os valores:

{% for person in page_obj %}
       <button id="NotifyBtn" name="person.FName" town="person.LName">Press Me</button>
{% endfor %}

<button id="NotifyBtn" name="Billy" town="Bob">Press Me</button>
<button id="NotifyBtn" name="Timmy" town="Tawin">Press Me</button>
<button id="NotifyBtn" name="Milly" town="House">Press Me</button>

Então eu tenho um JS que faz o seguinte:

document.getElementById("NotifyBtn").addEventListener("click", function(){
            var name = this.getAttribute("name");
            var town = this.getAttribute("town");
            fetch("{% url 'alert_via_JSON_Response' %}", {
                method: "POST",
                headers: {
                    "X-CSRFToken": "{{ csrf_token }}",
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ message: "Hi there: " + `${name} born in ${town}`
                 })
                }).then(response => response.json())
                    .then(data => alert(data.status));
        });

Na minha aplicação Django tenho o seguinte:

def alert_via_JSON_Response(request):
    if request.method == 'POST':
        data = json.loads(request.body)
        message = data.get('message', "Error in sending email")
        return JsonResponse({"status": f"{message}"})
    return JsonResponse({"status": f"No Message"})

No momento, quando clico na página, apenas um botão funciona e envia uma resposta JSON para a página. Não funciona se eu pressionar outro botão depois de pressionar o primeiro. Existe uma maneira de pressionar cada botão quando necessário e exibir a resposta JSON para cada botão?

javascript

1 respostas

  1. Best Answer

    A maneira como você direcionou seus elementos HTML é parecida, mas incorreta. Você não deve atribuir a mesma coisa a vários elementos id( leia outra resposta aqui e veja este artigo para saber mais sobre o porquê).

    Ter mais de 1 elemento com o mesmo idretornará apenas o primeiro elemento, e é por isso que apenas 1 botão funciona.

    Para resolver esse problema, substitua idpor classe modifique seu código para ficar assim:

    Botões

    <button class="NotifyBtn" name="Billy" town="Bob">Press Me</button>
<button class="NotifyBtn" name="Timmy" town="Tawin">Press Me</button>
<button class="NotifyBtn" name="Milly" town="House">Press Me</button>

    JavaScript:

    let buttons = document.getElementsByClassName("NotifyBtn")
for(let i = 0; i < buttons.length; i++){
    let button = buttons[i]
    button.addEventListener("click", function(){
        var name = button.getAttribute("name");
        var town = button.getAttribute("town");
        fetch("{% url 'alert_via_JSON_Response' %}", {
            method: "POST",
            headers: {
                "X-CSRFToken": "{{ csrf_token }}",
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ message: "Hi there: " + `${name} born in ${town}`
             })
            }).then(response => response.json())
                .then(data => alert(data.status));
    });
}

    O que isso faz é selecionar todos os elementos com classe retorná-los como um arrayelemento de. Em seguida, forfaça um loop em cada item arraye anexe o ouvinte de eventos a cada um deles.

    • 3

relate perguntas