Html Question posted in
Some basic documentation can be found here.

Html – Individually assigning page links to buttons

I’m trying to replicate the code below to open up a different page, each time. Please see:

Page example

Code:



        
        <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="openWin()">Open code</button>
                    
                    <button onclick="closeWin()">Close code</button>
                    <script>
                            let myWindow;

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

                            function closeWin() {
                              myWindow.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="openWin()">Open code</button>
                    
                    
                    <button onclick="closeWin()">Close code</button>
                    <script>
                            let myWindow;

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

                            function closeWin() {
                              myWindow.close();
                            }
                            
                    </script>

This works fine to open up task 1, but when I want to replicate the code for task 2, it still opens up task 1.

It opens up task 1 each time. Above I have posted the repeated code for task 1, which works fine, and task 2 which does not.

Tags:

3

Answers


  1. 0

    All your buttons will open the same URL unless you give a different URL.

    Here’s a simple example of a fixed window opener:

    <button onclick="openWin('python/task1.html')">Open code</button>

<button onclick="closeWin()">Close code</button>

<script>
let myWindow;

function openWin(url) {
    myWindow = window.open(url, "_blank", "width=800, height=800");
}

function closeWin() {
    myWindow.close();
}
</script>

    There are further improvements to make still. Most glaring issues first.

    1. Clicking multiple Open code buttons will cause break the Close code buttons. I.e. you’ll have an un-closable window.
    2. The Close code button will close any active window, not just the one for that example.
    3. You can click the Open code button twice and it’ll open multiple windows.

    Here’s how I solved those issues:

    • Index the window object by its URL
    • Test if it already exists if
    <button onclick="openWin('python/task1.html')">Open code</button>

<button onclick="closeWin('python/task1.html')">Close code</button>
<script>
let myWindows = {};

function openWin(url) {
    if (!myWindows[url] || myWindows[url].closed) {
        myWindows[url] = window.open(url, "_blank", "width=800, height=800");
    }
}

function closeWin(url) {
    if (myWindows[url]) {
        myWindows[url].close();
        delete(myWindows[url]);
    }
}
</script>
    Login or Signup to reply.
  2. 0

    Use a single pair of functions with parameters and return values.

    <button onclick="win1 = openWin('python/task1.html')">Open code</button>

<button onclick="closeWin(win1)">Close code</button>

<button onclick="win2 = openWin('python/task2.html')">Open code</button>

<button onclick="closeWin(win2)">Close code</button>

<script>
function openWin(url) {
    return window.open(url, "_blank", "width=800, height=800");
}

function closeWin(win) {
    win.close();
}
</script>
    Login or Signup to reply.
  3. 0

    You are overwriting you previous definitions of myWindow, openWindow and closeWin if you just copy paste the snippet modifying the URL to open.

    I’ll show you a way to do it without inline handlers since they are considered dangerous, outdated and disallowed by strict CSP headers.

    You can store the url to open and a taskId as data attributes. Then you can use your event handler to open that URL and to store the reference in a global variable that tracks the open windows.

    <button data-taskId="task1" data-url="python/task1.html" class="open">Open Task 1</button>

<button data-taskId="task1" class="close">Close code</button>


<button data-taskId="task2" data-url="python/task2.html" class="open">Open Task 2</button>

<button data-taskId="task2" class="close">Close code</button>

<script>

const openWindows = {};

for (const el of document.querySelectorAll("button.open")) {
  el.addEventListener('click', (e) => {
    // Close existing windows
    if (openWindows[e.target.dataset.taskId]) {
        openWindows[e.target.dataset.taskId].close();
    }
    openWindows[e.target.dataset.taskId] = window.open(e.target.dataset.url, "_blank", "width=800, height=800");
  });
}

for (const el of document.querySelectorAll("button.close")) {
  el.addEventListener('click', (e) => {
    if (openWindows[e.target.dataset.taskId]) {
        openWindows[e.target.dataset.taskId].close();
    }
  });
}
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search