appendChild does not work on shop website

Question

i was making a website with a function to add products on the homepage. The user entered the name, price and description of the product. but when publishing this product on the homepage, he does not appear. All the code works, except for appendChild()

first html file:

<!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>

second html file:

<!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 file:

* {
    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 file:

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)
    }
})

i don't know why this is happening.

I've already tried changing the appendChild() to the innerHTML and it keep going wrong

Answer 1

Based on your JS code, you don't wait for the page to load fully before running querySelector queries. This could lead to produtos equal to undefined .

Please check the browser's console for errors to check this theory.

Ideally, you should run any JS code after this event is triggered

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

This will ensure that all the components on the page are created and ready to be accessed via querySelector .

Please let me know if this helps.

appendChild does not work on shop website

Question

1 answers

solution1
0 2023-01-27 01:26:41

appendChild does not work on shop website

Question

1 answers

solution1 0 2023-01-27 01:26:41

solution1
0 2023-01-27 01:26:41