Copier l'image à l'aide de JavaScript
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.