event.target.value, appendChild и removeChild JS - PullRequest
Новая
       81

event.target.value, appendChild и removeChild JS

0 голосов
/ 13 апреля 2020

Я хотел бы сделать простую программу с двумя кнопками, если я нажимаю на кнопку «+», я хочу еще один ввод, если я нажимаю «-», я хочу, чтобы один ввод оставался. Я получил две кнопки типа ввода (значение 0 для плюса и 1 для меньше) и пробел (#addSpace) для новых входов. Если я нажимаю на значение 0 все в порядке, если я нажимаю 0 ничего. Проблема в консоли: NotFoundError: Узел не найден 

    HTML
        <div class="d-inline mx-auto" id="addSpace">
            <input name="firstvalue" placeholder="Nome studente">
        </div>

        <div class="d-block pt-5">
            <input type="button" id="aggiungi" value="0"><i class="fas fa-plus"></i>
            <input type="button" id="togli" value="1"><i class="fas fa-less-than"></i>
        </div>

    JS
let add = document.getElementById("aggiungi");
add.addEventListener("click", moreFunction);

let less = document.getElementById("togli");
less.addEventListener("click", moreFunction);
            let space = document.querySelector("#addSpace");

    function moreFunction() {
        let line = document.createElement("input")
        line.classList.add("d-flex");
        line.classList.add("mt-3");

        if (event.target.value == 0) {
            space.appendChild(line);
        }

        if (event.target.value == 1) {
            space.removeChild(line);
        }
    }

1 Ответ

0 голосов
/ 13 апреля 2020

Как насчет этого решения.

Каждому новому добавляемому вами вводу присваивается специальный класс added-input. Затем, когда вы нажимаете на кнопку «1», он просто ищет последний ввод с этим классом. 

let add = document.getElementById("aggiungi");
add.addEventListener("click", moreFunction);

let less = document.getElementById("togli");
less.addEventListener("click", moreFunction);
let space = document.querySelector("#addSpace");

function moreFunction() {

    if (event.target.value == 0) {
        let line = document.createElement("input")
        line.classList.add("d-flex");
        line.classList.add("mt-3");
        line.classList.add("added-input");
        space.appendChild(line);
    }

    if (event.target.value == 1) {
        const addedInputs = document.querySelectorAll(".added-input");
        if(addedInputs.length){
            addedInputs[addedInputs.length - 1].remove();
        }
    }
}
<div class="d-inline mx-auto" id="addSpace">
    <input name="firstvalue" placeholder="Nome studente">
</div>

<div class="d-block pt-5">
    <input type="button" id="aggiungi" value="0"><i class="fas fa-plus"></i>
    <input type="button" id="togli" value="1"><i class="fas fa-less-than"></i>
</div>
...