Salin imej menggunakan JavaScript
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.