将在javascript文件中生成的一行文本转换为HTML中的可点击链接

Question

抱歉，这个问题简直令人难以置信，但是作为一个崭新的程序员，我整天搜索时发现的所有答案都是针对我以外的其他问题，因此我决定将其发布。

我已经将自己发现的示例“随机报价生成器”程序转换为一个小型的基于Web的应用程序，可以通过按一下按钮来产生随机链接，但是很快我发现仅用链接替换了示例报价我选择的只是产生普通的不可点击的文本。

我已经尝试了许多与div和id标记搞混的方法，但是对我没有任何帮助。

我的html代码如下：

<html>
<head>
    <title>Simpsons Episode Generator</title>
</head>
<body>
    <h1>Simpsons Episode Generator</h1><br>
    <img src="https://vignette2.wikia.nocookie.net/simpsons/images/9/97/Mr_Burns_-_the_box.jpg/revision/latest?cb=20121215235014" alt="Mr Burns box">

    <div id="linkDisplay">
        <!-- Link will pop up here -->
    </div>

    <!-- Button to call the javascript and prduce a link -->
    <button onclick="newLink()">New Episode</button>

    <!-- javascript declared -->
    <script src="javascript.js"></script>
</body>
</html>

如您所见，它只是调用javascript来运行randomizer然后输出结果。

javascript如下：

//Links To Episodes
var links = [
    'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-1/',
    'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-2/',
    'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-3/',
    'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-4/',
    'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-5/',
    'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-6/'
];

//Select 1 Link at random and push it to the HTML
function newLink() {
    var randomLink = Math.floor(Math.random() * (links.length));
    document.getElementById('linkDisplay').innerHTML = links[randomLink];
}

我想要的只是在按下按钮后就可以使HTML接收到的单击。

感谢您的阅读，也很抱歉提出这样一个简单的问题，但我确实整天都在寻找如何独自完成这项工作...

Answer 1

如果要导航到该URL，则无需“单击链接”，只需更改窗口的位置即可：

window.location.href = links[randomLink];

如果您想链接到该位置，以便人们可以单击它，请将<div>设为<a>

<a id="linkDisplay" href='#' />

（ #表示它会转到页面顶部），然后根据需要更新href ：

document.getElementById('linkDisplay').href = links[randomLink];

Answer 2

您需要在HTML中插入锚标记，以允许用户点击随机链接

 //Links To Episodes var links = ['http://kisscartoon.so/episodes/the-simpsons-season-1-episode-1/', 'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-2/', 'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-3/', 'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-4/', 'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-5/', 'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-6/',] //Select 1 Link at random and push it to the HTML function newLink() { var randomLink = links[Math.floor(Math.random() * (links.length))]; document.getElementById('linkDisplay').innerHTML = '<a href="'+randomLink+'" target="_blank">'+randomLink+'</a>'; }

 <div id="linkDisplay"> <!-- Link will pop up here --> </div> <!-- Button to call the javascript and prduce a link --> <button onclick="newLink()">New Episode</button>

将在javascript文件中生成的一行文本转换为HTML中的可点击链接

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-09-11 00:32:17

解决方案2
1 2017-09-11 00:33:20

将在javascript文件中生成的一行文本转换为HTML中的可点击链接

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-09-11 00:32:17

解决方案2 1 2017-09-11 00:33:20

解决方案1
1 已采纳 2017-09-11 00:32:17

解决方案2
1 2017-09-11 00:33:20