简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Fragen und Antworten  >  Hauptteil

Bild mit JavaScript kopieren

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.

P粉757432491P粉757432491283 Tage vor444

Antworte allen(2)Ich werde antworten

  • P粉654894952

    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。

    Antwort
    0
  • P粉610028841

    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

    Antwort
    0
  • StornierenAntwort