event.target.value、appendChild 和 removeChild JS
event.target.value, appendChild and removeChild JS
我想用两个按钮做一个简单的程序,如果我点击“+”按钮我想要多一个输入,如果我点击“-”我想要一个输入。
我有两个输入类型按钮(值 0 表示加号,1 表示减号),以及一个 space (#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);
}
}
这个解决方案怎么样。
您添加的每个新输入都会得到一个特殊的 class added-input
。然后,当您单击“1”按钮时,它只会查找带有 class 的最后输入。
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>
我想用两个按钮做一个简单的程序,如果我点击“+”按钮我想要多一个输入,如果我点击“-”我想要一个输入。 我有两个输入类型按钮(值 0 表示加号,1 表示减号),以及一个 space (#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);
}
}
这个解决方案怎么样。
您添加的每个新输入都会得到一个特殊的 class added-input
。然后,当您单击“1”按钮时,它只会查找带有 class 的最后输入。
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>