多iframe场景下Show/Hide按钮无法对应控制目标视频的问题修复求助

我开发了一个网页，包含添加按钮与文本输入框。输入YouTube嵌入链接后，页面会生成对应的iframe视频，默认模糊显示并添加Show按钮，视频下方还会生成Hide按钮用于重新模糊视频。当前存在问题：当生成多个视频后，点击某个视频的Show按钮时，总是解锁页面最上方的视频，而非点击对应的目标视频。

核心问题是重复使用固定ID：每次生成视频时，iframe的id="image"、Show按钮的id="btnID"都是固定值。DOM中ID必须唯一，document.getElementById()只会返回匹配到的第一个元素，所以点击任何Show/Hide按钮都会操作页面中第一个对应的元素。

JavaScript代码 #

function newElement() {
  var inputValue = document.getElementById("myInput").value;
  // 修正链接判断逻辑：原逻辑错误，改为同时包含https://和embed
  if (inputValue.includes("https://") && inputValue.includes("embed")) {
    var everyElement = document.createElement("div");
    document.body.appendChild(everyElement);

    var element = document.createElement("div");
    element.className = "page";
    everyElement.appendChild(element);

    var element2 = document.createElement("iframe");
    element2.allowFullscreen = "allowfullscreen";
    element2.src = inputValue;
    element2.height = "880";
    element2.width = "100%";
    element2.style.filter = "blur(20px)";
    element2.style.pointerEvents = "none"; // 初始禁用视频交互
    element2.frameBorder = "0";
    // 移除固定ID，改用变量直接引用
    element.appendChild(element2);

    var element3 = document.createElement("button");
    element3.className = "bg-text";
    // 通过闭包直接操作当前视频对应的元素，无需ID查找
    element3.onclick = function show() {
      element2.style.filter = "blur(0)";
      element2.style.pointerEvents = "auto";
      element3.style.display = "none";
    };
    element3.textContent = "Show";
    element.appendChild(element3);

    var element4 = document.createElement("button");
    element4.className = "hideBtn";
    element4.textContent = "Hide";
    element4.onclick = function hide() {
      element2.style.filter = "blur(20px)";
      element2.style.pointerEvents = "none";
      element3.style.display = "initial";
    };
    everyElement.appendChild(element4);

    document.getElementById("myInput").value = "";
  }
}

HTML代码（无需修改） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Secret</title>
</head>
<body>  
    <div class="addPlc">
        <input type="text" id="myInput" placeholder="Link...">
        <span onclick="newElement()" class="addBtn">Add</span>
    </div>
    <div id="myUL"></div>                
        
    <script src="code.js"></script>
</body>
</html>

• 移除所有重复的固定ID（image、btnID、btnHID），彻底避免DOM ID冲突
• 修正链接判断逻辑：原代码inputValue.includes("https://" && "embed")逻辑错误，改为同时验证两个字符串
• 按钮点击事件直接通过变量引用当前创建的iframe和按钮元素，确保操作的是点击按钮对应的目标视频
• 初始给iframe添加pointerEvents: none，避免模糊状态下误触视频交互

状态展示 #

初始状态（点击Hide按钮后） #

点击Show按钮后的状态 #

内容的提问来源于stack exchange，提问作者Dániel Takács