Javascript 如何更改<；中的src值；嵌入>；而克隆整个<；部门>；用js？_Javascript_Html

Javascript 如何更改<；中的src值；嵌入>；而克隆整个<；部门>；用js？

javascript html

Javascript 如何更改<；中的src值；嵌入>；而克隆整个<；部门>；用js？,javascript,html,Javascript,Html,我不熟悉基于web的应用程序，我想问一个关于克隆整个div的问题。我想做的是：在克隆src之后更改它的值。它有一个函数，但在我添加了克隆功能后，它就不起作用了 <div id="ytContainer0"> <embed id="ytsrc" width="800" height="500" src="https://www.youtube.com/v/CrHsXTqbwkM" /> </div> <input id="inpu

我不熟悉基于web的应用程序，我想问一个关于克隆整个div的问题。我想做的是：在克隆src之后更改它的值。它有一个函数，但在我添加了克隆功能后，它就不起作用了

<div id="ytContainer0">
    <embed id="ytsrc" width="800" height="500"
        src="https://www.youtube.com/v/CrHsXTqbwkM" />
</div>

<input id="input" type="text" name="Youtube Source" />
<button id="button" onclick="changeLink();">Click to change source!</button>

<script>
document.getElementById('button').onclick = duplicate;
var i = 0;
function duplicate() {
    var original = document.getElementById('ytContainer' + i);
    var clone = original.cloneNode(true);
    clone.id = "ytContainer" + ++i;
    clone.onclick = duplicate;
    original.parentNode.appendChild(clone);
}
</script>

<script>
function changeLink() {
    var link = document.getElementById("ytsrc");
    ytsrc.src = 'https://www.youtube.com/v/' + input.value;
    return false;
}
</script>


点击更改来源！
document.getElementById（'button'）。onclick=duplicate；
var i=0；
函数复制（）{
var original=document.getElementById（'ytContainer'+i）；
var clone=original.cloneNode（true）；
clone.id=“ytContainer”++i；
clone.onclick=重复；
original.parentNode.appendChild（克隆）；
}
函数changeLink（）{
var link=document.getElementById（“ytsrc”）；
ytsrc.src=https://www.youtube.com/v/'+input.value；
返回false；
}

在JSFIDLE上：

我不确定您到底想做什么，但您的代码有很多问题：

您的按钮的
```
onclick
```
在HTML中被赋值为
```
changeLink（）
```
，但随后您的JavaScript
```
document.getElementById（'button'）。onclick=duplicate
```
将覆盖它，因此实际上从未调用函数
```
changeLink（）
```
您正在克隆
```
div
```
容器并为其分配一个新ID，但还需要为
```
embed
```
分配一个新ID，否则最终会导致多个
```
embed
```
共享同一ID
您将
```
duplicate（）
```
函数分配给新克隆，该克隆应该在内部显示视频，但需要单击视频才能播放，这意味着克隆上的
```
onclick
```
将永远不会被触发
您可能需要删除
```
changeLink（）
```
函数，并直接调用
```
duplicate（）
```
函数。在这种情况下，您需要在那里更改
```
src
```

以下是一个工作示例：

var i=0；
函数复制（）{
var original=document.getElementById（'ytContainer'+i）；
var clone=original.cloneNode（true）；
clone.id=“ytContainer”++i；
embed=clone.children[0]；
embed.id='ytsrc'+i；
embed.src=https://www.youtube.com/v/'+input.value；
original.parentNode.appendChild（克隆）；
}


点击更改来源我不确定您到底想做什么，但您的代码有很多问题：

您的按钮的onclick
在HTML中被赋值为changeLink（）
，但随后您的JavaScriptdocument.getElementById（'button'）。onclick=duplicate
将覆盖它，因此实际上从未调用函数changeLink（）

您正在克隆div
容器并为其分配一个新ID，但还需要为embed
分配一个新ID，否则最终会导致多个embed
共享同一ID
您将duplicate（）
函数分配给新克隆，该克隆应该在内部显示视频，但需要单击视频才能播放，这意味着克隆上的onclick
将永远不会被触发
您可能需要删除changeLink（）
函数，并直接调用duplicate（）
函数。在这种情况下，您需要在那里更改src


以下是一个工作示例：

var i=0；
函数复制（）{
var original=document.getElementById（'ytContainer'+i）；
var clone=original.cloneNode（true）；
clone.id=“ytContainer”++i；
embed=clone.children[0]；
embed.id='ytsrc'+i；
embed.src=https://www.youtube.com/v/'+input.value；
original.parentNode.appendChild（克隆）；
}

点击更改来源在你的问题中发布你的代码，而不是在链接中。它甚至改变了什么，代码就是代码。但如果这就是这个网站的运行方式，我会这样做。顺便问一下，为什么这个网站有两张反对票？对于那个JSFIDLE链接？是的，网站就是这样工作的。你可以。也许这就是落选的原因。别担心，一旦你把你的问题编辑成一个好问题，就会有更多的投票。JSFIDLE链接很好，放回去。您需要代码和链接。欢迎来到SO。我添加了JSFIDLE链接。非常感谢。在你的问题中发布你的代码，而不是在链接中。它甚至改变了什么，代码就是代码。但如果这就是这个网站的运行方式，我会这样做。顺便问一下，为什么这个网站有两张反对票？对于那个JSFIDLE链接？是的，网站就是这样工作的。你可以。也许这就是落选的原因。别担心，一旦你把你的问题编辑成一个好问题，就会有更多的投票。JSFIDLE链接很好，放回去。您需要代码和链接。欢迎来到SO。我添加了JSFIDLE链接。非常感谢。谢谢你帮助我。它可以根据我的需要工作。我使用了两个按钮，因为正如您所说，document.getElementById（'button'）.onclick=duplicate正在覆盖它。但现在我只需按一个按钮就可以了。再次感谢，谢谢你帮我。它可以根据我的需要工作。我使用了两个按钮，因为正如您所说，document.getElementById（'button'）.onclick=duplicate正在覆盖它。但现在我只需按一个按钮就可以了。再次感谢。