为按钮单独分配页面链接：Task2按钮仍打开Task1页面的问题

你遇到的核心问题是全局作用域下的函数与变量名冲突：两段代码都定义了同名的openWin()、closeWin()函数和myWindow变量，浏览器解析时后定义的函数会覆盖先定义的，但由于代码执行顺序或缓存问题，实际调用的始终是第一个openWin()函数，导致Task2按钮打开错误页面。

下面提供两种可行的解决方法：

方案1：给每个任务使用唯一的函数/变量名 #

直接修改函数和变量名称，避免命名冲突：

<section class="container g-py-15">
    <div class="g-brd-around g-brd-5 g-brd-gray-light-v4 g-pa-30">
        <div class="row">
            <div class="col-md-9 align-self-center">
                <h3 class="h4">Task 1 &amp; Extension</h3>
                <p class="lead g-mb-20 g-mb-0--md">Set up the inital track markers</p>
            </div>
            <div class="col-md-3 align-self-center text-md-right">
                <button onclick="openWinTask1()">Open code</button>
                <button onclick="closeWinTask1()">Close code</button>
                <script>
                        let myWindowTask1;

                        function openWinTask1() {
                          myWindowTask1 = window.open("8_1python/task1.html", "_blank", "width=800, height=800");
                        }

                        function closeWinTask1() {
                          myWindowTask1.close();
                        }
                </script>
            </div>
        </div>
    </div>
</section>

<section class="container g-py-15">
    <div class="g-brd-around g-brd-5 g-brd-gray-light-v4 g-pa-30">
        <div class="row">
            <div class="col-md-9 align-self-center">
                <h3 class="h4">Task 2 &amp; Extension</h3>
                <p class="lead g-mb-20 g-mb-0--md">Complete the track set up&nbsp;</p>
            </div>
            <div class="col-md-3 align-self-center text-md-right">
                <button onclick="openWinTask2()">Open code</button>
                <button onclick="closeWinTask2()">Close code</button>
                <script>
                        let myWindowTask2;

                        function openWinTask2() {
                          myWindowTask2 = window.open("8_1python/task2.html", "_blank", "width=800, height=800");
                        }

                        function closeWinTask2() {
                          myWindowTask2.close();
                        }
                </script>
            </div>
        </div>
    </div>
</section>

方案2：使用参数化通用函数（更简洁） #

定义一个通用的打开/关闭函数，通过参数传递页面地址和任务标识，避免重复代码：

首先在页面的<body>开头添加全局通用函数：

// 用对象存储每个任务的窗口实例，避免互相干扰
let openWindows = {};

function openTaskWin(taskId, pageUrl) {
  openWindows[taskId] = window.open(pageUrl, "_blank", "width=800, height=800");
}

function closeTaskWin(taskId) {
  if (openWindows[taskId]) {
    openWindows[taskId].close();
    delete openWindows[taskId]; // 清理已关闭的窗口引用
  }
}

然后修改两个任务的按钮事件：

<section class="container g-py-15">
    <div class="g-brd-around g-brd-5 g-brd-gray-light-v4 g-pa-30">
        <div class="row">
            <div class="col-md-9 align-self-center">
                <h3 class="h4">Task 1 &amp; Extension</h3>
                <p class="lead g-mb-20 g-mb-0--md">Set up the inital track markers</p>
            </div>
            <div class="col-md-3 align-self-center text-md-right">
                <button onclick="openTaskWin('task1', '8_1python/task1.html')">Open code</button>
                <button onclick="closeTaskWin('task1')">Close code</button>
            </div>
        </div>
    </div>
</section>

<section class="container g-py-15">
    <div class="g-brd-around g-brd-5 g-brd-gray-light-v4 g-pa-30">
        <div class="row">
            <div class="col-md-9 align-self-center">
                <h3 class="h4">Task 2 &amp; Extension</h3>
                <p class="lead g-mb-20 g-mb-0--md">Complete the track set up&nbsp;</p>
            </div>
            <div class="col-md-3 align-self-center text-md-right">
                <button onclick="openTaskWin('task2', '8_1python/task2.html')">Open code</button>
                <button onclick="closeTaskWin('task2')">Close code</button>
            </div>
        </div>
    </div>
</section>

这个方案的优势是代码更简洁，还能同时管理多个窗口，不会出现互相干扰的问题。

内容的提问来源于stack exchange，提问作者playacar