时间戳

首页 > 解决方案 > 我在表单上添加了一个事件侦听器，但它刷新了页面

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

问题描述

有人可以帮助我吗，我正在尝试使用我用 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($2)" id="carrot">Carrot</option>
                <option value="Potato($3)" id="potato">Potato</option>
                <option value="Fish($10)" id="fish">Fish</option>
                <option value="Meat($13)" id="meat">Meat</option>
                <option value="Eggs($6)" 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($2)"){
        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($3)"){
        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($10)"){
        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($13)"){
        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($6)"){
        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($2)"){
        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;
}

标签： javascriptdomevent-handlingdom-events

解决方案

在后面加上().remove

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

  return false
}

推荐阅读