2017-08-28 59 views
1

我有一個字符串& JS按鈕被點擊 我搜索尋找一個解決方案小時的時候,但我很遺憾沒有找到一個, 這裏顯示GIF是代碼:鏈接HREF到JavaScript字符串

var currImage = 0; 
 
window.onload =() => { 
 
    const factsArr = [{ 
 
     image: 'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif', 
 
     source: "know more" 
 
    }, 
 
    { 
 
     image: 'https://media.giphy.com/media/TvsLe5DV4gKCQ/giphy.gif', 
 
     source: "know more" 
 
    }, 
 
    { 
 
     image: 'https://media.giphy.com/media/1nkUav308CBws/giphy.gif', 
 
     source: "know more" 
 
    }, 
 
    ]; 
 

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

我想添加鏈接到「瞭解更多」。

+0

所以'來源:「Know More「'???或者你想在你的對象中添加一個屬性?如果是這樣,請將div更改爲錨點並像設置innerHTML一樣設置href – epascarello

回答

0

要麼把HTML到源

var currImage = 0; 
 
window.onload =() => { 
 
    const factsArr = [ 
 
\t { image:'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif', source:"<a href='https://www.example.com'>know more 1</a>" }, 
 
    { image:'https://media.giphy.com/media/TvsLe5DV4gKCQ/giphy.gif', source:"<a href='https://www.example.com'>know more 2</a>" }, 
 
\t { image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif', source:"<a href='https://www.example.com'>know more 3</a>" }, 
 
    ]; 
 
\t 
 
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" />

或者添加新的屬性,改變你的HTML

var currImage = 0; 
 
window.onload =() => { 
 
    const factsArr = [ 
 
\t { image:'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif', source:"know more", href: "https://www.example.com" }, 
 
    { image:'https://media.giphy.com/media/TvsLe5DV4gKCQ/giphy.gif', source:"know more", href: "https://www.example.com" }, 
 
\t { image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif', source:"know more", href: "https://www.example.com" }, 
 
    ]; 
 
\t 
 
const swtch =() => { 
 
    document.getElementById('image').setAttribute('src', factsArr[currImage].image); 
 
    const out = document.getElementById('source'); 
 
    out.innerHTML=factsArr[currImage].source; 
 
    out.href=factsArr[currImage].href; 
 
    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><a id="source"></a></div> 
 
<img id="image" />