最近我決定嘗試將小專案付諸實踐，這些專案與課堂上完成的專案不同。
這個有一個簡單的目標：
我有一個圖像和它旁邊的一個按鈕。每次按下按鈕時，它都應該在按鈕本身之前創建一個與第一個具有相同類別和內容的 img 標籤。
// 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>
首先，我更改了 getElementById > querySelector，然後重寫註解想法步驟的所有內容。由於它不起作用，我在這裡閱讀了幾個問題並查看了 yt。也嘗試刪除 forEach，但是當我這樣做時，第二個元素沒有出現在裡面。在這兩種情況下，新增按鈕都不起作用。
P粉6548949522024-01-11 15:03:16
我對你的 addImagem 函數做了一些更改： 使用「setAttribute」函數，這樣它就不會在已經存在的 內建立一個新的 img 標籤。
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
}
“forEach”函數僅適用於陣列。由於您只有一個按鈕，您可以使用：
addBtn.addEventListener('click',addImagem)
或您可以將 addBtn 的 querySelector 更改為 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