-4

Olá, estou tentando adicionar um evento no meu botão, no qual ele mude o Status de "A Fazer" para "Concluido", modifiquei várias vezes e não consigo encontrar o erro. Por favor me ajudem. Código do Form:

<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Descrição</th>
            <th>Categoria</th>
            <th>Data de Ínicio</th>
            <th>Data de Vencimento</th>
            <th>Status</th>
            <th class="w-25"></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var todolist in Model)
        {
            string atrasado = todolist.Atrasado ? "bg-warning" : "";
            <tr>
                <td>@todolist.ToDoListId</td>
                <td>@todolist.Content</td>
                <td>@todolist.Category</td>
                <td>@todolist.DateStart.ToString("dd/MM/yyyy")</td>
                <td class="@atrasado">@todolist.DateExpiration?.ToString("dd/MM/yyyy")</td>
                <td class="@atrasado">@todolist.Status?.ToString()</td>
                <td>
                    @if(todolist.Status == "A Fazer")
                    {
                            <button type="submit" class="btn btn-primary btn-sm btnCompletar" name="@nameof(ToDoList.ToDoListId)" value="@todolist.ToDoListId">
                            Completar
                        </button>
                    }
                    </td>

                    <td>
                    <a asp-action="Edit" asp-route-id="@todolist.ToDoListId" class="btn btn-sm btn-secondary">Editar</a> |
                    <a asp-action="Details" asp-route-id="@todolist.ToDoListId" class="btn btn-sm btn-info">Detalhes</a> |
                    <a asp-action="Delete" asp-route-id="@todolist.ToDoListId" class="btn btn-sm btn-danger">Deletar</a>
                </td>
            </tr>
        }
    </tbody>
</table>
</form>

//Código no Javascript:

<script>
const btnCompletar = document.querySelectorAll('.btnCompletar');

btnCompletar.forEach((e) => {

    e.addEventListener('click', () => {
        e.preventDefault();
        console.log("botão clicado", e.textContent);
    })
})
</script>```


[Projeto](https://i.sstatic.net/l86Cjf9F.png)

**No caso ao clicar o botão "Completar", esse Status iria mudar para "Concluído**"

1
  • Importante você editar sua pergunta reduzindo o código a um Exemplo Mínimo, Completo e Verificável do problema, explicar como tentou resolver e descrever o mais objetivamente possível qual foi a dificuldade encontrada. Ao editar, automaticamente sua pergunta é destacada para uma revisão e a comunidade reavalia os votos e o fechamento. Queira consultar a central de ajuda e respectivos links para um melhor entendimento da finalidade das perguntas e respostas do site.
    – Largato
    Commented 1/07 às 20:20

1 Resposta 1

-5

Fiz um exemplo estático, acredito que vc possa adaptar conforme a suas necessidades.

<body>
<form>
<table class="table" id="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Descrição</th>
            <th>Categoria</th>
            <th>Data de Ínicio</th>
            <th>Data de Vencimento</th>
            <th>Status</th>
            <th class="w-25"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Id</td>
            <td>Content</td>
            <td>Category</td>
            <td>10/05/2024</td>
            <td>22/02/2024</td>
            <td>A Fazer</td>
            <td><button class="btn btn-primary btn-sm btnCompletar">Completar</button></td>
            <td>
                <a class="btn btn-sm btn-secondary">Editar</a> |
                <a class="btn btn-sm btn-info">Detalhes</a> |
                <a class="btn btn-sm btn-danger">Deletar</a>
            </td>
        </tr>
        <tr>
            <td>Id</td>
            <td>Content</td>
            <td>Category</td>
            <td>10/05/2024</td>
            <td>22/02/2024</td>
            <td>A Fazer</td>
            <td><button class="btn btn-primary btn-sm btnCompletar">Completar</button></td>
            <td>
                <a class="btn btn-sm btn-secondary">Editar</a> |
                <a class="btn btn-sm btn-info">Detalhes</a> |
                <a class="btn btn-sm btn-danger">Deletar</a>
            </td>
        </tr>
        <tr>
            <td>Id</td>
            <td>Content</td>
            <td>Category</td>
            <td>10/05/2024</td>
            <td>22/02/2024</td>
            <td>A Fazer</td>
            <td><button class="btn btn-primary btn-sm btnCompletar">Completar</button></td>
            <td>
                <a class="btn btn-sm btn-secondary">Editar</a> |
                <a class="btn btn-sm btn-info">Detalhes</a> |
                <a class="btn btn-sm btn-danger">Deletar</a>
            </td>
        </tr>
        <tr>
            <td>Id</td>
            <td>Content</td>
            <td>Category</td>
            <td>10/05/2024</td>
            <td>22/02/2024</td>
            <td>A Fazer</td>
            <td><button class="btn btn-primary btn-sm btnCompletar">Completar</button></td>
            <td>
                <a class="btn btn-sm btn-secondary">Editar</a> |
                <a class="btn btn-sm btn-info">Detalhes</a> |
                <a class="btn btn-sm btn-danger">Deletar</a>
            </td>
        </tr>
        <tr>
            <td>Id</td>
            <td>Content</td>
            <td>Category</td>
            <td>10/05/2024</td>
            <td>22/02/2024</td>
            <td>A Fazer</td>
            <td><button class="btn btn-primary btn-sm btnCompletar">Completar</button></td>
            <td>
                <a asp-action="Edit" class="btn btn-sm btn-secondary">Editar</a> |
                <a asp-action="Details" class="btn btn-sm btn-info">Detalhes</a> |
                <a asp-action="Delete" class="btn btn-sm btn-danger">Deletar</a>
            </td>
        </tr>
    </tbody>
</table>
</form>
</body>
</html>

<script>
    let elements = document.getElementsByClassName('btnCompletar')
    let table = document.getElementById('table')

    Array.from(elements).forEach(function(element, index, arr) {
      element.addEventListener('click', function(event){
        event.preventDefault()
        
        if(index <= elements.length){
        
            index++
            if(index > 0){
                let row = table.getElementsByTagName('tr')[index++]
                let td = row.getElementsByTagName('td')[5]
            
                td.innerHTML = "Concluído**"
            }
            
            index = -1
        }
      })
    });

</script>
1
  • 3
    Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 10/05 às 22:26

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .