如何在JavaScript中引用html中的iframe

我刚刚开始学习html和CSS，现在我想添加一点JavaScript，我对它一无所知

我想创建一个随机按钮，在iframe中显示随机嵌入的视频（例如1-5个视频）。我搜索了谷歌，发现了一个JavaScript/（jQuery？）：

$（文档）.ready（函数（）{
变量数组=[“项目1”、“项目2”、“项目3”、“项目4”、“项目5”]；
$（“#按钮”）.bind（'click'，function（）{
var random=array[Math.floor（Math.random（）*array.length）]；
$（“h1”）.html（随机）；
});
});

使用html：

<h1>Will be replaced</h1>
<button id="button">Random</button>

将被替换
随机的

例如，在我的html中，我得到：

<iframe width="640" height="360" src="http://www.youtube.com/embed/npvNPORFXpc"     frameborder="0" allowfullscreen></iframe>           

我想这个嵌入式视频显示在页面上，当你点击随机按钮，它应该改变为1-5视频的。如何将其设置为JavaScript中的一个项目，以便在每个项目上都有一个视频

问题2：

有时会生成相同的编号，从而生成相同的项目

---

我希望有人能教我一些这方面的东西

这可能不多，但却是一个起点：

刚得到我能找到的前5个视频id:））

以下是Js：

$(document).ready(function() {
    var array=["FOIjvHjK0Rw", "CcsUYu0PVxY", "dE_XVl7fwBQ", "iIwxR6kjTfA", "USe6s2kfuWk"];
    $('#button').bind('click', function() {
        var random = array[Math.floor(Math.random() * array.length)];
        $("h1").html(random);
        var url="http://www.youtube.com/embed/"+random;
        $('#frame').attr('src', url);
        $('#frame').css('visibility','visible');
    });
});

---

如果您第二次点击随机按钮，那么iframe是应该被另一个iframe替换，还是应该将另一个iframe添加到页面？感谢您的快速响应，我希望iframe被替换到原来的位置。或者如果可能的话，是否应该替换iframe中的视频？通过在js中使用源代码选项？好吧，您可以在iframe中冷设置一个新的src…我将在几分钟内制作一个小脚本来演示…谢谢！如果你给iframe一个ID，你可以用你选择按钮的方式轻松地选择它：

可以用

$（“#视频”）

选择，然后你可以用

$（“#视频”）设置src属性。attr（“src”，newUrlHere）

我不经常使用jQuery:）…我更喜欢纯JS这里的基本部分是纯JS，有了jQuery，使用css语法和绑定事件处理程序（跨浏览器）更容易选择。下面是一个简单的JS版本，使用相同的逻辑：谢谢，这很有帮助！现在我不再需要标题来查看随机按钮的工作。现在唯一的问题是，它有时会生成相同的视频，我如何排除再次生成的活动视频？很多人感谢它能得到的所有帮助！：）你真的想用jQuery吗？。我想用纯javascript会更容易。。。

$(document).ready(function() {
    var array=["FOIjvHjK0Rw", "CcsUYu0PVxY", "dE_XVl7fwBQ", "iIwxR6kjTfA", "USe6s2kfuWk"];
    $('#button').bind('click', function() {
        var random = array[Math.floor(Math.random() * array.length)];
        $("h1").html(random);
        var url="http://www.youtube.com/embed/"+random;
        $('#frame').attr('src', url);
        $('#frame').css('visibility','visible');
    });
});