我在表单上添加了一个事件监听器，但它刷新了页面

Question

谁能帮帮我，我正在尝试使用我用 DOM 创建的按钮。这个按钮将用于删除一个项目，我试过同时使用事件侦听器和事件处理程序，但似乎都不起作用，浏览器只是刷新页面，下面是代码。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Cart Calculator</title>
</head>
<body>
    <div class="big-container">
        <form  onsubmit= "return getTotal(this)" >
            <div class="addToCart">
            <label for="cart" class="label">Add to cart:</label>
            <select name="list" id="list">
                <option value="selectProducts" id="selctProducts">Selct Product</option>
                <option value="Carrot()" id="carrot">Carrot</option>
                <option value="Potato()" id="potato">Potato</option>
                <option value="Fish()" id="fish">Fish</option>
                <option value="Meat()" id="meat">Meat</option>
                <option value="Eggs()" id="eggs">Eggs</option>
            </select>
            <button id="add" onclick="return addItem(this)">Add</button>
        </div>
        <div id="carrotSelected"></div>
        <div id="potatoSelected"></div>
        <div id="fishSelected"></div>
        <div id="meatSelected"></div>
        <div id="eggsSelected"></div>
        <button id="submit" type="submit">Calculate</button>
        </form>
    </div>
    <script src="app.js"></script>
</body>
</html>

JavaScript

let remove = document.createElement("button");
let textRemove = document.createTextNode("Remove");
remove.appendChild(textRemove);

addItem = () =>{
    let carrot = document.getElementById("carrot");
    let potato = document.getElementById("potato");
    let fish = document.getElementById("fish");
    let meat = document.getElementById("meat");
    let eggs = document.getElementById("eggs");
    let selectProducts = document.getElementById("selectProducts");
    let list = document.getElementById("list");
    let output = list.value;
    let digit = document.createElement("input");



    if(list.value === "selectProducts"){
        alert("Please select a product");
        return false;
    }
    if(list.value === "Carrot()"){
        document.querySelector('#carrotSelected').textContent = output;
        document.querySelector('#carrotSelected').style.fontSize = "2rem";
        document.querySelector('#carrotSelected').style.width = "50%";
        document.querySelector('#carrotSelected').style.margin = "0 3rem";
        document.querySelector('#carrotSelected').style.marginBottom = "1rem";
        document.querySelector('#carrotSelected').style.display = "flex";
        document.querySelector('#carrotSelected').style.justifyContent = "space-evenly";
        digit.setAttribute("type", "number");
        document.getElementById("carrotSelected").appendChild(digit);
        document.getElementById("carrotSelected").appendChild(remove);

    
        return false;

    }

    if(list.value === "Potato()"){
        document.querySelector('#potatoSelected').textContent = output;
        document.querySelector('#potatoSelected').style.fontSize = "2rem";
        document.querySelector('#potatoSelected').style.width = "50%";
        document.querySelector('#potatoSelected').style.margin = "0 3rem";
        document.querySelector('#potatoSelected').style.marginBottom = "1rem";
        document.querySelector('#potatoSelected').style.display = "flex";
        document.querySelector('#potatoSelected').style.justifyContent = "space-evenly";
        digit.setAttribute("type", "number");
        document.getElementById("potatoSelected").appendChild(digit);
        document.getElementById("potatoSelected").appendChild(remove);
        return false;

    }

    if(list.value === "Fish()"){
        document.querySelector('#fishSelected').textContent = output;
        document.querySelector('#fishSelected').style.fontSize = "2rem";
        document.querySelector('#fishSelected').style.width = "50%";
        document.querySelector('#fishSelected').style.margin = "0 3rem";
        document.querySelector('#fishSelected').style.marginBottom = "1rem";
        document.querySelector('#fishSelected').style.display = "flex";
        document.querySelector('#fishSelected').style.justifyContent = "space-evenly";
        digit.setAttribute("type", "number");
        document.getElementById("fishSelected").appendChild(digit);
        document.getElementById("fishSelected").appendChild(remove);
        return false;

    }

    if(list.value === "Meat()"){
        document.querySelector('#meatSelected').textContent = output;
        document.querySelector('#meatSelected').style.fontSize = "2rem";
        document.querySelector('#meatSelected').style.width = "50%";
        document.querySelector('#meatSelected').style.margin = "0 3rem";
        document.querySelector('#meatSelected').style.marginBottom = "1rem";
        document.querySelector('#meatSelected').style.display = "flex";
        document.querySelector('#meatSelected').style.justifyContent = "space-evenly";
        digit.setAttribute("type", "number");
        document.getElementById("meatSelected").appendChild(digit);
        document.querySelector('#remove').style.display ="block"
        document.getElementById("meatSelected").appendChild(remove);
        return false;

    }

    if(list.value === "Eggs()"){
        document.querySelector('#eggsSelected').textContent = output;
        document.querySelector('#eggsSelected').style.fontSize = "2rem";
        document.querySelector('#eggsSelected').style.width = "50%";
        document.querySelector('#eggsSelected').style.margin = "0 3rem";
        document.querySelector('#eggsSelected').style.marginBottom = "1rem";
        document.querySelector('#eggsSelected').style.display = "flex";
        document.querySelector('#eggsSelected').style.justifyContent = "space-evenly";
        digit.setAttribute("type", "number");
        document.getElementById("eggsSelected").appendChild(digit);
        document.getElementById("eggsSelected").appendChild(remove);

        remove.addEventListener('click', (e) => {
            document.querySelector('#eggSelected').style.display = "none";            
        });

        return false;
    }

    return false;

}

removeItem = () => {
    let carrot = document.getElementById("carrot");
    let potato = document.getElementById("potato");
    let fish = document.getElementById("fish");
    let meat = document.getElementById("meat");
    let eggs = document.getElementById("eggs");
    let list = document.getElementById("list");
    let output = list.value;
    let digit = document.createElement("input");

    if(output === "Carrot()"){
        document.getElementById("carrotSelected").remove;

        return false;
    }

    return false;
}

remove.addEventListener("click", removeItem);

和CSS（如果需要）

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.big-container{
    width: 100%;
    height: 100%;
}

.addToCart{
    width: 90%;
    margin: 0 auto;
    padding-top: 10rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid black;
}

.label{
    font-size: 2rem;
}

#list{
    width: 50%;
    font-size: 1.3rem;
}

#submit{
    width: 15%;
    height: 2rem;
    font-size: 1.3rem;
    margin: 0 25rem;
}

#add{
    width: 10%;
    font-size: 1.3rem;
}

Answer 1

在.remove

之后添加()

if (output === 'Carrot()') {
  document.getElementById('carrotSelected').remove()

  return false
}

我在表单上添加了一个事件监听器，但它刷新了页面

I added an event listener on form but it refreshes page instead

javascript

dom

event-handling

dom-events