Question 213968 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Duplicate img with js

Recently I decided to try to put into practice small projects, which are variations of things from projects done in the classroom.

This one has a simple goal:

I have an image and a button next to it. Every time the button is pressed, it should create an img tag with the same class and content as the first, before the button itself.

// 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>

First of all i’ve change getElementById > querySelector, then rewrite evething comenting the steps of idea. As it didn’t work i read a few questions here and looked in yt. Also tried to remove the forEach, but when i did it a second element, without the img inside appear. In both cases, the button add didn’t work.

Tags:

2

Answers


  1. 0 
    // 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 = '<img class="imgQ" src="imgs/bigodes.jpg">'; // give this img a HTML content
}


//Event

for(var i = 0; i < addBtn.length; i++){
  addBtn[i].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>

    Does this work good?

    Login or Signup to reply.
  2. 0

    I did some changes on your addImagem function:
    Use the "setAttribute" function so it doenst create a new img tag inside the already existing .

    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

}

    the "forEach" function only works for Arrays. Since you only have one button you can use:

    addBtn.addEventListener('click',addImagem)

    Or you can change your querySelector to querySelectorAll for the addBtn.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search