Vor kurzem habe ich beschlossen, zu versuchen, kleine Projekte in die Praxis umzusetzen, die sich von denen im Unterricht unterscheiden.
Dieser hat ein einfaches Ziel:
Ich habe ein Bild und einen Button daneben. Jedes Mal, wenn eine Schaltfläche gedrückt wird, sollte vor der Schaltfläche selbst ein IMG-Tag mit derselben Klasse und demselben Inhalt wie beim ersten erstellt werden.
// 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>
Zuerst habe ich getElementById > querySelector geändert und dann im Schritt „Kommentaridee“ alles neu geschrieben. Da es nicht funktionierte, habe ich hier ein paar Fragen gelesen und mir yt angeschaut. Ich habe auch versucht, forEach zu entfernen, aber wenn ich das mache, erscheint das zweite Element nicht darin. In beiden Fällen funktioniert die Schaltfläche „Hinzufügen“ nicht.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我对你的 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。
// 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
Cats! Anyway