javascript - 为什么触发条件时没有警报？

Question

我在处理程序中实现了对空输入字段的验证：

if(inputsAdd[0] === "" || inputsAdd[1] === "" || inputsAdd[2] === ""){
    alert ("fill all fields");}

在处理程序中：buttDelete.addEventListener以相同的方式，但由于某种原因，检查表单是否为空不起作用。帮助修复

const formAdd = document.forms[0];
const inputsAdd = formAdd.elements;
const buttAdd = formAdd.elements[3];
buttAdd.addEventListener('click', (e) => {
    if (inputsAdd[0] === "" || inputsAdd[1] === "" || inputsAdd[2] === "") {
        alert("fill all fields");
    } else {
        e.preventDefault();
        shop.addProduct(new Product(inputsAdd[0].value, parseInt(inputsAdd[2].value),
            parseInt(inputsAdd[1].value)));
        shop.show();
        inputsAdd[0].value = "";
        inputsAdd[1].value = "";
        inputsAdd[2].value = "";
    }
}, false);
// delete product by name after click
const formDelete = document.forms[1];
const nameDelete = formDelete.elements[0];
const buttDelete = formDelete.elements[1];
buttDelete.addEventListener('click', (e) => {
    if (nameDelete === "") {
        alert("write a name of product what you want to delete");
    } else {
        e.preventDefault();
        shop.deleteProductByName(nameDelete.value);
        shop.show();
        nameDelete.value = "";
    }

}, false);
let shop = new Shop();

        <form id="addForm">
            <label for="name" >Name of product</label>
            <input type="text"  id="name" class="input-product">
            <label for="price">Price of product</label>
            <input type="text"  id="price" class="input-product">
            <label for="count">Count of product</label>
            <input type="text"  id="count" class="input-product">
            <button id="add">Add</button>
        </form>    
<form id="delete-form">
        <label for="name-delete">Delete product by name</label>
        <input type="text" id="name-delete" class="input-delete">
        <button id="delete" type="button">Delete</button>
    </form>

标签： javascript

Answer 1

inputsAdd[0], inputsAdd[1] ,inputsAdd[2] 是对象。.value在这些对象上使用您可以获得比较的值

改变这个

if (inputsAdd[0] === "" || inputsAdd[1] === "" || inputsAdd[2] === ""){
            alert("fill all fields");
        } 

至

if (inputsAdd[0].value === "" || inputsAdd[1].value === "" || inputsAdd[2].value === "") {
        alert("fill all fields");
    }

nameDelete也需要改成nameDelete.value

const formAdd = document.forms[0];
const inputsAdd = formAdd.elements;
const buttAdd = formAdd.elements[3];
buttAdd.addEventListener('click', (e) => {
    if (inputsAdd[0].value === "" || inputsAdd[1].value === "" || inputsAdd[2].value === "") {
        alert("fill all fields");
    } else {
        e.preventDefault();
        shop.addProduct(new Product(inputsAdd[0].value, parseInt(inputsAdd[2].value),
            parseInt(inputsAdd[1].value)));
        shop.show();
        inputsAdd[0].value = "";
        inputsAdd[1].value = "";
        inputsAdd[2].value = "";
    }
}, false);
// delete product by name after click
const formDelete = document.forms[1];
const nameDelete = formDelete.elements[0];
const buttDelete = formDelete.elements[1];
buttDelete.addEventListener('click', (e) => {
    if (nameDelete.value === "") {
        alert("write a name of product what you want to delete");
    } else {
        e.preventDefault();
        shop.deleteProductByName(nameDelete.value);
        shop.show();
        nameDelete.value = "";
    }

}, false);

<form id="addForm">
            <label for="name" >Name of product</label>
            <input type="text"  id="name" class="input-product">
            <label for="price">Price of product</label>
            <input type="text"  id="price" class="input-product">
            <label for="count">Count of product</label>
            <input type="text"  id="count" class="input-product">
            <button id="add">Add</button>
        </form>    
<form id="delete-form">
        <label for="name-delete">Delete product by name</label>
        <input type="text" id="name-delete" class="input-delete">
        <button id="delete" type="button">Delete</button>
    </form>