css appendChild无法在商店网站上运行

dldeef67 于 2023-01-27 发布在其他

关注(0)|答案(1)|浏览(151)

我在做一个网站，有一个在主页上添加产品的功能，用户输入了产品的名称、价格和描述，但是在主页上发布这个产品时，他没有出现，所有代码都可以工作，除了appendChild（）
第一个html文件：

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loja</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/f2a567fbc9.js" crossorigin="anonymous"></script>
    <script src="scripts.js"defer ></script>
</head>
<body>
    <header>
        <h1>Loja TemDeTudo</h1>

        <ul class="list">
            <a href="criar.html"><li><i class="fa-solid fa-plus"></i></li></a>
            <!--<i class="fa-solid fa-xmark"></i>-->
        </ul>
    </header>

    <main class="posts">
        <ul class="produtos">

        
        </ul>
    </main>
    
</body>
</html>

第二个html文件：

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loja</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/f2a567fbc9.js" crossorigin="anonymous"></script>
    <script src="scripts.js" defer></script>
</head>
<body>
    <header>
        <h1>Loja TemDeTudo</h1>

        <ul class="list">
            
            <a href="index.html"><li><i class="fa-solid fa-xmark"></i></li></a>
        </ul>
    </header>

    <main class="criaposts">
        <input id="nome" type="text" name="" id="" placeholder="nome do produto"><br>
        <input id="price" type="number" name="" id="" placeholder="preço em R$"><br>
        <textarea name="" id="descrição" cols="30" rows="10" placeholder="descrição do produto"></textarea><br>
        <a href="index.html"><button class="cancel">cancelar</button></a>
        <a href="index.html" id="ancora"><button class="confirm" id="add">confirmar</button></a>
    </main>
    
</body>
</html>

css文件：

* {
    padding:0;
    margin: 0;
    font-family: sans-serif;
}

header {
    display: flex;
    padding: 30px;
    background-color: purple;
    color: whitesmoke;
}

.list {
    margin-left: 60%;
    font-size: 40px;
    list-style-type: none;
    color: rgb(255, 255, 177);
    transition-duration: .6s;
    cursor: pointer;
   
}


.list:hover {
    color:purple;
    background-color:  rgb(255, 255, 177);
    padding: 1rem;
    border-radius: 20px;
}

a {
    color: inherit;
}

textarea {
    resize: none;
    margin-top: 1.3rem;
    font-size: 20px;
    padding: 1rem;
    outline: none;
    border-radius: 1rem;
    border-color: black;
}

.criaposts {
    margin-top: 50px;
    text-align: center;
    position: absolute;
    width:100%;
}

input {
    font-size: 22px;
    border: none;
    margin-top: 1.1em;
    width: 25%;
    outline: none;
    padding: .3em;
    
}

textarea:focus {
    border-color: black;
}

button {
    margin-top: 20px;
    margin: 20px;
    font-size: 1.4em;
    padding: 1rem;
    border-radius: 1rem;
    border: none;
    cursor: pointer;
    color: whitesmoke;
    transition-duration: .3s;
}

.confirm {
    background-color: rgb(9, 255, 0);
}

.cancel {
    background-color: crimson;
}

.cancel:hover , .confirm:hover {
    opacity: .8;
    font-size: 1.3em;
}

.posts {
    margin-top: 3em;
    margin-left: 8rem;
}

.produtos {
    display: flex;
    list-style: none;
}

.detalhes {
    margin-top: 5em;
}

p {
    margin-top: 1em;
    color: rgb(31, 31, 31);
    opacity: .95;
}

.produtosPub {
    transition-duration: .2s;
    padding: 1rem;
    width: 15%;
}

.produtosPub:hover {
    opacity: .8;
    cursor: pointer;
    
}

js文件：

const add = document.querySelector("#add");
const posts = document.querySelector(".posts");
const ancora = document.querySelector("#ancora");
const produtos = document.querySelector(".produtos")

add.addEventListener("click" , () => {
   
    const nomeProdu = document.querySelector("#nome").value;
    const price = document.querySelector("#price").value;
    const descriçao = document.querySelector("#descrição").value;
    

    if(nomeProdu.length > 25) {
        alert("o nome está muito grande");
        ancora.removeAttribute("href");
        nomeProdu = "";
    }

    else if(!nomeProdu || !price || !descriçao) {
        ancora.removeAttribute("href");
        alert("Esta faltando informações do produto");
        
        nomeProdu = "";
        price = "";
        descriçao = "";
    }

    else {
        ancora.setAttribute("href","index.html");
        const lista = document.createElement("li");
        lista.classList.add("produtosPub");
        
        lista.innerHTML = `<h2>${nomeProdu}</h2>
        <div class="detalhes">
            <h2>
                R$: ${price}
            </h2>

            <p>
                ${descriçao}
            </p>
        </div>`
        
        produtos.appendChild(lista)
    }
})

我不知道为什么会这样。
我已经尝试过将appendChild（）更改为innerHTML，但一直出错

css

来源：https://stackoverflow.com/questions/75253223/appendchild-does-not-work-on-shop-website

1条答案

按热度按时间

vlju58qv1#

根据JS代码，在运行querySelector查询之前，不会等待页面完全加载，这可能导致produtos等于undefined。
请检查浏览器的控制台是否有错误以验证此理论。
理想情况下，您应该在触发此事件后运行任何JS代码

window.addEventListener('DOMContentLoaded', (event) => {
  // your JS initialization code here
});

这将确保页面上的所有组件都已创建，并且可以通过querySelector进行访问。
如果有帮助请告诉我。

赞(0）回复(0）举报 2023-01-27

我来回答

css appendChild无法在商店网站上运行

1条答案

相关问题

热门标签

最新问答