JavaScriptを使用して画像をコピーする

Question

最近、授業とは違う小さなプロジェクトを実践してみようと思いました。

これには単純な目標があります:

画像とその隣にボタンがあります。ボタンが押されるたびに、ボタン自体の前に、最初のボタンと同じクラスとコンテンツを持つ img タグが作成されます。

リーリー

最初に getElementById > querySelector を変更し、コメント アイデア ステップのすべてを書き直しました。うまくいかなかったので、ここでいくつかの質問を読み、ytを調べました。また、forEach を削除しようとしましたが、削除すると 2 番目の要素が内部に表示されません。どちらの場合も、追加ボタンは機能しません。

Answer 1

addImagem 関数にいくつかの変更を加えました。 既存の img タグ内に新しい img タグが作成されないように、「setAttribute」関数を使用します。

リーリー

「forEach」関数は配列でのみ機能します。ボタンは 1 つだけなので、使用できるのは次のとおりです:

リーリー

または、addBtn の querySelector を querySelectorAll に変更することもできます。

Answer 2

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

    
    
           
    
    
    
        


    

        
Cats! Anyway