CODEWITHSUNDEEP
javascriptc#jqueryasp.net-corerazor
pitten
pitten

Reputation: 97

find out which button was pressed in the foreach loop

I return to the user a list of his notes, surely that there may be an indefinite number of them. I create buttons when the text is longer than 80 characters.

By clicking on this button, I want to catch a click among other buttons and find out all the information about his parent div. How can i do this?

<div class="d-flex flex-wrap">
        @foreach (var item in ViewBag.UserTodoList)
        {
            <div class="card" style="width: 32%; margin-left: 1%; margin-top:1%">
                <div class="card-body">
                    <h5 class="card-title">@item.Name</h5>
                    @if (item.Body.Length > 80)
                    {
                        <p class="card-text">@item.Body.Substring(0, 80)...</p>
                        <button class="btn btn-info" id="1234">Прочитать</button>
                    }
                    else
                    {
                        <p class="card-text">@item.Body</p>

                    }

                    <a asp-controller="ToDo" asp-action="DeleteTodos" asp-route-todoId="@item.Id" class="btn btn-primary">Удалить</a>
                </div>
            </div>
        }
    </div>

Upvotes: 0

Views: 755

Answers (2)

m51
m51

Reputation: 2010

Something like this:

const buttons = Array.from(document.querySelectorAll('.card .btn'));

function handleClick() {
    const parent = this.parentNode; // here is parent
    console.log(parent) // lets log it to console
}

buttons.forEach((button) => { button.addEventListener('click', handleClick);})

BTW, you should add unique class to your buttons. It will be easier to get them by querySelectorAll or getElementsByClassName

Upvotes: 1

Aleksa Ristic
Aleksa Ristic

Reputation: 2499

I am not expert in this (new one to it too) but how i would do it is add that button some class like ErrorClass and then inside script i would do

$('.ErrorButton').click(function() {
    var parent = this.parent(); // With this you get parent div container
});

Upvotes: 1

Related Questions