JavaScriptで配列に新しい要素を追加する方法

Question

JavaScriptとHTMLで2つの要素を配列に追加しましたが、クリップボードに新しい要素としてコピーを追加したいのですが、これは複雑なコードのためです。 。 は、ここにあなたがいくつかのエラー1. document.getElementsById（ 'copyToClipboard'）のinnerHTML = copyToClipboard（要素）.copyToClipboardを持っている私のコード

var currImage = 0; 
 
window.onload =() => { 
 
    const factsArr = [ 
 
\t { image:'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif', source:"<a href='http://news.nationalgeographic.com/news/2010/03/100315-half-male-half-female-chickens/' style='text-decoration:none;color:#FFFFFF;' target='_blank'>know more</a>",}, 
 
\t { image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif',  source:"<a href='http://www.guinnessworldrecords.com/world-records/most-expensive-pizza' style='text-decoration:none;color:#FFFFFF;'target='_blank'>know more</a>"}, 
 
    ]: 
 
    const swtch =() => { 
 
    document.getElementsByClassName('image')[0].setAttribute('src', factsArr[currImage].image); 
 
    document.getElementsByClassName('source')[0].innerHTML=factsArr[currImage].source; 
 
\t document.getElementById('copyToClipboard').innerHTML=copyToClipboard(element).copyToClipboard 
 
    currImage++; 
 
    if (currImage == factsArr.length) 
 
     currImage = 0; 
 
    console.log(currImage); 
 
}; 
 
document.getElementsByClassName('generate-btn')[0].addEventListener('click', swtch); 
 
document.getElementsByClassName('source')[0].addEventListener('click', swtch); 
 
} 
 
function copyToClipboard(element) { 
 
    var $temp = $("<input>"); 
 
    $("body").append($temp); 
 
    $temp.val($(element).text()).select(); 
 
    document.execCommand("copy"); 
 
    $temp.remove(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="generate-btn">Amazing Fact Button</button> 
 
<div class="source"></div> 
 
<img class="image" /> 
 
<button onclick="copyToClipboard('element')">Copy Link</button>

Answer 1

var currImage = 0; 
 
window.onload =() => { 
 
    const factsArr = [ 
 
    { image:'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif', source:"<a href='http://news.nationalgeographic.com/news/2010/03/100315-half-male-half-female-chickens/' style='text-decoration:none;color:#FFFFFF;' target='_blank'>know more</a>",}, 
 
    { image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif',  source:"<a href='http://www.guinnessworldrecords.com/world-records/most-expensive-pizza' style='text-decoration:none;color:#FFFFFF;'target='_blank'>know more</a>"}, 
 
    ]; 
 
    const swtch =() => { 
 
    $('.image').attr('src', factsArr[currImage].image); 
 
    $('.source').html(factsArr[currImage].source); 
 
    $('.copyToClipboard').data('test',factsArr[currImage].image); 
 
    $('.test').css('display', 'block'); 
 
    currImage++; 
 
    if (currImage == factsArr.length) 
 
     currImage = 0; 
 
    console.log(currImage); 
 
}; 
 
$('.generate-btn').on('click', swtch); 
 
$('.source').on('click', swtch); 
 
} 
 
function copyToClipboard() { 
 
    var $temp = $("<input>"); 
 
    $("body").append($temp); 
 
    $temp.val($('.copyToClipboard').data('test')).select(); 
 
    document.execCommand("copy"); 
 
    $temp.remove(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="generate-btn">Amazing Fact Button</button> 
 
<div class="test" style="display:none;"> 
 
<div class="source"></div> 
 
<img class="image" /> 
 
<button class="copyToClipboard" onclick="copyToClipboard()">Copy Link</button> 
 
</div>