Baru-baru ini saya memutuskan untuk cuba mempraktikkan projek kecil yang berbeza daripada yang dilakukan di dalam kelas.
Yang ini mempunyai matlamat mudah:
Saya mempunyai imej dan butang di sebelahnya. Setiap kali butang ditekan, ia harus mencipta teg img dengan kelas dan kandungan yang sama seperti yang pertama, sebelum butang itu sendiri.
// 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>
Mula-mula saya menukar getElementById > querySelector dan kemudian menulis semula semuanya dalam langkah idea ulasan. Oleh kerana ia tidak berfungsi, saya membaca beberapa soalan di sini dan melihat yt. Juga cuba mengalih keluar forEach, tetapi apabila saya berbuat demikian, elemen kedua tidak muncul di dalam. Dalam kedua-dua kes, butang tambah tidak berfungsi.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya membuat beberapa perubahan pada fungsi addImagem anda: Gunakan fungsi "setAttribute" supaya ia tidak mencipta teg img baharu di dalam teg yang sudah sedia ada.
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 }Fungsi "forEach" hanya berfungsi dengan tatasusunan. Memandangkan anda hanya mempunyai satu butang, anda boleh menggunakan:
addBtn.addEventListener('click',addImagem)Atau anda boleh menukar querySelector addBtn kepada 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