顯示當JS按鈕被點擊

Question

我創建了一個JavaScript按鈕，從giphy.com爲了生成GIFs， 我嘗試添加一個「瞭解更多」文本與GIF按鈕顯示點擊 但顯然按鈕是不是文本工作了。 這裏是代碼：

var currImage = 0; 
 
window.onload =() => { 
 
    const factsArr = [ 
 
\t { image:'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif', source:"Know more" }, 
 
\t { image:'https://media.giphy.com/media/3ohhwJax6g4Y8BK30k/giphy.gif', source:"know more" }, 
 
    { image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif', source="Know more" }, 
 
    ]; 
 
    
 
    document.getElementById('source').addEventListener('click',() => { 
 
    document.getElementById('generate-btn').addEventListener('click',() => { 
 
     
 
    document.getElementById('image').setAttribute('src', factsArr[currImage].image); 
 
     currImage++; 
 
     if (currImage == factsArr.length) 
 
     currImage = 0; 
 
    })  
 
}

<button id="generate-btn">Amazing Fact Button</button> 
 
<img id="image"></img> 
 
<div id="source"></div>

Answer 1

固定一些語法和邏輯錯誤的代碼工作後。請參閱代碼中的註釋。

var currImage = 0; 
 
window.onload =() => { 
 
    const factsArr = [ 
 
\t { image:'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif', source:"Know more" }, 
 
\t { image:'https://media.giphy.com/media/3ohhwJax6g4Y8BK30k/giphy.gif', source:"know more" }, 
 
    //{ image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif', source="Know more" }, syntax error "=" 
 
    { image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif', source:"Know more" }, 
 
    ]; 
 
    
 
    //document.getElementById('source').addEventListener('click',() => { 
 
    //syntax error. arg list not closed 
 
    //logical error. nothing to click on window.onload. next lines never executed 
 
    /* 
 
    document.getElementById('generate-btn').addEventListener('click',() => { 
 
     
 
    document.getElementById('image').setAttribute('src', factsArr[currImage].image); 
 
     currImage++; 
 
     if (currImage == factsArr.length) 
 
     currImage = 0; 
 
    }) 
 
    */ 
 
    //corrected code 
 
    const swtch =() => { 
 
    document.getElementById('image').setAttribute('src', factsArr[currImage].image); 
 
    document.getElementById('source').innerHTML=factsArr[currImage].source; 
 
    currImage++; 
 
    if (currImage == factsArr.length) 
 
     currImage = 0; 
 
    console.log(currImage); 
 
}; 
 
document.getElementById('generate-btn').addEventListener('click', swtch); 
 
document.getElementById('source').addEventListener('click', swtch); 
 

 
}

<button id="generate-btn">Amazing Fact Button</button> 
 
<div id="source"></div> 
 
<img id="image" /><!--</img> img is self-closing-->