Делегирование событий - нельзя изменить класс и значение кнопки - PullRequest
Новая
       32

Делегирование событий - нельзя изменить класс и значение кнопки

0 голосов
/ 15 сентября 2018

Я пытаюсь забанить пользователей и снять их запреты, используя ванильный javascript.Я использую таблицы данных, поэтому мне нужно использовать делегирование событий для запуска событий ..

Но когда я закончу с запретом пользователя, я не могу изменить класс кнопки или значение, как я могу это сделать?

document.querySelector(".m-portlet__body").addEventListener("click", function (e) {
        if (e.target.className === "btn btn-danger btn-sm btn-block") {
            console.log(e.target)
            let id = e.target.dataset.id,
                xhr = new XMLHttpRequest(),
                token = document.head.querySelector("[name=csrf-token]").content;
            xhr.open("POST", "users/ban/" + id);
            xhr.setRequestHeader("X-CSRF-TOKEN", token);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    let response = JSON.parse(xhr.responseText);
                    if (xhr.status === 200 && response.status === 'OK') {
                        e.target.className.replace("btn-danger","btn-success");
                        e.target.value = "Remove Ban"
                //I also try with;
                //e.target.classList.remove("btn-danger");
                //e.target.classList.add("btn-success");
                    } else {
                        console.log('failed');
                    }
                }
            }
            xhr.send();
        }

        if (e.target.className === "btn btn-success btn-sm btn-block"){

        }
    })

1 Ответ

0 голосов
/ 15 сентября 2018

JS-строки являются неизменяемыми, что означает, что String # replace не заменяет исходную строку, а возвращает новую строку. 

 e.target.className = e.target.className.replace("btn-danger","btn-success")

Изменит значение e.target.className

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

если целью является элемент кнопки, а не input[type=button], то вы не можете изменить его текстовое содержимое с помощью e.target.value, вам необходимо использовать e.target.textContent = "New value";

...