Récemment, j'ai décidé d'essayer de mettre en pratique des petits projets différents de ceux réalisés en classe.
Celui-ci a un objectif simple :
J'ai une image et un bouton à côté. Chaque fois que vous appuyez sur un bouton, il doit créer une balise img avec la même classe et le même contenu que la première, avant le bouton lui-même.
// From HTML
const content = document.querySelector('#content');
const addBtn = document.querySelector('#btn-plus');
// Function
function addImagem(){
const img = document.createElement('img'); // create img
img.classList.add('imgQ'); // give this img a class ('imgQ')
img.innerHTML = '<img src="imgs/bigodes.jpg">'; // give this img a HTML content
content.insertBefore('img','addBtn'); // insert this img before add button inside div
}
//Event
addBtn.forEach((Btn)=> Btn.addEventListener('click',addImagem())
);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gats</title>
<link rel="stylesheet" href="style/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="script/index.js"></script>
</head>
<body>
<header class="top">
<h1>Cats! Anyway</h1>
</header>
<nav class="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn-search" type="submit"><i class="fa-solid fa-search"></i></button>
</nav>
<main class="mid">
<div id="content">
<img class="imgQ" src="imgs/bigodes.jpg">
<button type="submit" id="btn-plus"><i class="fa-thin fa-plus"></i></button>
</div>
</main>
<footer class="bottom"></footer>
</body>
</html>
J'ai d'abord modifié getElementById > querySelector, puis j'ai tout réécrit lors de l'étape d'idée de commentaire. Comme cela n'a pas fonctionné, j'ai lu quelques questions ici et je les ai regardées. J'ai également essayé de supprimer forEach, mais lorsque je fais cela, le deuxième élément n'apparaît pas à l'intérieur. Dans les deux cas, le bouton Ajouter ne fonctionne pas.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'ai apporté quelques modifications à votre fonction addImagem : Utilisez la fonction "setAttribute" pour qu'elle ne crée pas de nouvelle balise img à l'intérieur d'une balise déjà existante.
function addImagem(){ const img = document.createElement('img'); // create img img.classList.add('imgQ'); // give this img a class ('imgQ') img.setAttribute('src',"imgs/bigodes.jpg"); // give this img a HTML content content.insertBefore(img,content.children[0]); // insert this img before add button inside div }La fonction "forEach" ne fonctionne qu'avec des tableaux. Puisque vous n'avez qu'un seul bouton, vous pouvez utiliser :
addBtn.addEventListener('click',addImagem)Ou vous pouvez remplacer le querySelector de addBtn par querySelectorAll.
// From HTML const content = document.querySelector('#content'); const addBtn = document.querySelectorAll('#btn-plus'); // Function function addImagem(){ const img = document.createElement('img'); // create img img.classList.add('imgQ'); // give this img a class ('imgQ') content.insertBefore(img,document.querySelector('#btn-plus')); // insert this img before add button inside div img.outerHTML = '
'; // give this img a HTML content
}
//Event
for(var i = 0; i
Gats
sssccc
Cats! Anyway