Recently I decided to try to put small projects into practice that are different from those done in class.
This one has a simple goal:
I have an image and a button next to it. Every time a button is pressed, it should create an img tag with the same class and content as the first one, before the button itself.
// 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>
First I changed getElementById > querySelector and then rewrote everything in the comment idea step. Since it didn't work, I read a few questions here and looked at yt. Also tried removing the forEach, but when I do that the second element doesn't appear inside. In both cases, the add button doesn't work.
P粉6548949522024-01-11 15:03:16
I made some changes to your addImagem function: Use the "setAttribute" function so that it doesn't create a new img tag inside an already existing one.
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
}
The "forEach" function only works with arrays. Since you only have one button you can use:
addBtn.addEventListener('click',addImagem)
Or you can change addBtn's querySelector to querySelectorAll.
P粉6100288412024-01-11 14:24:56
// 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 < addBtn.length; i++){
addBtn[i].addEventListener('click',addImagem)
}
Gats
Cats! Anyway