显示当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-->