Как получить значения из флажков в JavaScript, используя onchange для запуска функции? - PullRequest
Новая
       43

Как получить значения из флажков в JavaScript, используя onchange для запуска функции?

0 голосов
/ 01 декабря 2018

Я учусь в старшей школе и прохожу курс программирования (JavaScript) в школе.У нас только что был тест (который я с треском провалил), но мы можем попробовать еще раз.

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

Я немного просмотрел здесь и увидел что-то под названием jQuery.Я понятия не имею, что это такое, поэтому я был бы очень признателен за помощь в чистом JavaScript.

Хорошо, вот что у меня есть в коде.Примечание. Некоторые переменные и другие указаны на норвежском языке.Я не думаю, что это должно быть проблемой, так как я показываю ссылки на все.

Мои входные данные (флажки): 

<input type="checkbox" class="tur" value="0" onchange="funcSjekkBoks(this)">
<input type="checkbox" class="tur" value="1" onchange="funcSjekkBoks(this)">
<input type="checkbox" class="tur" value="2" onchange="funcSjekkBoks(this)">
<input type="checkbox" class="tur" value="3" onchange="funcSjekkBoks(this)">
<input type="checkbox" class="tur" value="4" onchange="funcSjekkBoks(this)">

Мне нужно, чтобы их значение было только числами, так какЯ буду использовать их в отношении списка массивов, который у меня будет позже.

Вот моя функция: 

var inputTur = document.getElementsByClassName("tur");
console.log(inputTur);

    function funcSjekkBoks(checkboxEl) {
        var resultatListe = [];
        if (checkboxEl.checked) {
            resultatListe.push(inputTur.value);
            console.log(resultatListe);
        }
        else {
            console.log("usant")
        }
    }

То, что я хотел бы случиться (если все флажки отмечены сверху вниз):

resultatListe = [0, 1, 2, 3, 4]
Когда я снимаю флажок, его значение будет удалено из массива.

Вот что в настоящее время происходит:
Когда я отмечаю флажок, я получаю [undefined] в своей консоли, когда я снимаю флажок, я получаю usant (хотя это ожидаемый ответ, у меня нет 'я еще не работал с остальной частью моего предложения if.)

Ответы [ 2 ]

0 голосов
/ 01 декабря 2018 
var inputTur = document.getElementsByClassName("tur");
var resultatListe = [];
console.log(inputTur);

        function funcSjekkBoks(checkboxEl) {

            if (checkboxEl.checked) {
                resultatListe.push(parseInt(checkboxEl.value));
            }
            else {
                resultatListe = resultatListe.filter(d => d != checkboxEl.value)
            }
            console.log(resultatListe);
        }

В вашей логике было 2 ошибки:

1) Вам нужно определить resultatListe вне функции, чтобы он не инициализировался в пустой массив каждый раз

2) В вашем коде resultatListe.push(inputTur.value); inputTur является HTMLCollection флажков, тогда как вам нужен один флажок.

Для логики else, если значение каждого флажка будет уникальным, вы можете использовать array.prototype.filterспособ отфильтровать значение флажка от resultatListe

0 голосов
/ 01 декабря 2018

Ниже код будет работать для вас: 

var resultatListe = [];
function funcSjekkBoks(checkboxEl) {
    var value = parseInt(checkboxEl.value);
    if (checkboxEl.checked) {
        resultatListe.push(value);
        console.log(resultatListe);
    }
    else {
        console.log("usant");
        var indexToRemove = resultatListe.indexOf(value);
        resultatListe.splice(indexToRemove,1);
    }
}

Вам нужно оставить массив resultatListe вне функции, иначе он будет инициализироваться пустым каждый раз, когда флажок установлен / не отмечен, вызываяобработчик onchange.Вы получили неопределенный доступ к свойству value в объекте HTMLCollection, который не содержит этого свойства.Узнайте больше об этом на MDN

...