javascript - 将href链接到JavaScript字符串

我有一个字符串和一个GIF，当单击JS按钮时会显示
我花了几个小时寻找解决方案，但不幸的是没有找到解决方案，
这是代码：

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

我想将链接添加到“了解更多”。

最佳答案

要么将HTML放入源

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

 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 = [
	{ 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" },
	{ image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif', source:"know more", href: "https://www.example.com" },
    ];

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

关于javascript - 将href链接到JavaScript字符串，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45921613/