Executing JavaScript - Triggering an 'onClick' event within a For loop to dynamically load multiple hyperlinks

Question

Executing JavaScript - Triggering an 'onClick' event within a For loop to dynamically load multiple hyperlinks

I am currently working on creating a listview using JSON data. However, when I call an 'onclick' function from a For loop, the link opens in a new window and loads three URLs into the browser's URL input. Is there a way to modify the code below so that only one link is loaded instead of three?

            <h3>Links</h3> <br>
            <ul class="list">
                <div id="timetables"></div>
            </ul>

            <script>
            var xmlhttp = new XMLHttpRequest();
            var url = "https://api.myjson.com/bins/qg69t";
            var URL_1 = "";
            var URL_2 = "";

            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var myArr = JSON.parse(this.responseText);
                    myFunction(myArr);
                }
            };
            xmlhttp.open("GET", url, true);
            xmlhttp.send();

            function myFunction(arr) {
                var out = "";
                var i;
                for(i = 0; i < arr.length; i++) {
                    URL_1 += arr[i].timetable_1_link;
                    URL_2 += arr[i].timetable_2_link;
                    console.log(arr[i].timetable_1_link);
                    out += '<div>' + arr[i].course + '</div><p><a href="#" onclick="openLinkInNewWindow_1()">' + arr[i].timetable_1_name + '</a></p>';
                    
                }
                document.getElementById("timetables").innerHTML = out;
            }

            function openLinkInNewWindow_1() {
                    window.open(URL_1, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes");
                }


            </script>

javascript json onclick

Answer 1

Answer №1

To enhance the function that opens the URL, you can modify it to accept a parameter in this manner:

function openLinkInNewWindow_1(URL) {
                window.open(URL, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes");
            }

Subsequently, when looping through the array, pass the URL as an argument with each link.

function myFunction(arr) {
            var out = "";
            var i;
            for(i = 0; i < arr.length; i++) {
                URL_1 = arr[i].timetable_1_link;
                URL_2 = arr[i].timetable_2_link;
                console.log(arr[i].timetable_1_link);
                out += '<div>' + arr[i].course + '</div><p><a href="#" onclick="openLinkInNewWindow(' + URL_1 + ')">' + arr[i].timetable_1_name + '</a></p><p><a href="#" onclick="openLinkInNewWindow(' + URL_2 + ')">' + arr[i].timetable_2_name + '</a></p>';
            }
            document.getElementById("timetables").innerHTML = out;
        }

This approach streamlines the process by utilizing only one function. Additionally, I made adjustments such as removing the trailing + from the URL_1 assignment line.

Answer 2

To enhance the function that opens the URL, you can modify it to accept a parameter in this manner:

function openLinkInNewWindow_1(URL) {
                window.open(URL, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes");
            }

Subsequently, when looping through the array, pass the URL as an argument with each link.

function myFunction(arr) {
            var out = "";
            var i;
            for(i = 0; i < arr.length; i++) {
                URL_1 = arr[i].timetable_1_link;
                URL_2 = arr[i].timetable_2_link;
                console.log(arr[i].timetable_1_link);
                out += '<div>' + arr[i].course + '</div><p><a href="#" onclick="openLinkInNewWindow(' + URL_1 + ')">' + arr[i].timetable_1_name + '</a></p><p><a href="#" onclick="openLinkInNewWindow(' + URL_2 + ')">' + arr[i].timetable_2_name + '</a></p>';
            }
            document.getElementById("timetables").innerHTML = out;
        }

This approach streamlines the process by utilizing only one function. Additionally, I made adjustments such as removing the trailing + from the URL_1 assignment line.

Answer 3

Answer №2

The issue lies in using URL_1+=. Each time the loops run, it appends a new string to the existing URL(s).

To fix this problem, remove the += from the URL_ variables in your function 'myFunction' and assign values directly using '=' only.
Below is the updated code:

<h3>Links</h3> <br>
        <ul class="list">
            <div id="timetables"></div>
        </ul>

        <script>
        var xmlhttp = new XMLHttpRequest();
        var url = "https://api.myjson.com/bins/qg69t";
        var URL_1 = "";
        var URL_2 = "";

        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myArr = JSON.parse(this.responseText);
                myFunction(myArr);
            }
        };
        xmlhttp.open("GET", url, true);
        xmlhttp.send();

        function myFunction(arr) {
            var out = "";
            var i;
            for(i = 0; i < arr.length; i++) {
                URL_1 = arr[i].timetable_1_link;
                URL_2 = arr[i].timetable_2_link;
                out += '<div>' + arr[i].course + '</div><p><a href="#" onclick="openLinkInNewWindow_1()">' + arr[i].timetable_1_name + '</a></p><p><a href="#" onclick="openLinkInNewWindow_2()">' + arr[i].timetable_2_name + '</a></p>';
            }
            document.getElementById("timetables").innerHTML = out;
        }

        function openLinkInNewWindow_1() {
                window.open(URL_1, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes");
            }

        function openLinkInNewWindow_2() {
                window.open(URL_2, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes");
            }

        </script>

You can view the updated and active code by clicking here

Answer 4

The issue lies in using URL_1+=. Each time the loops run, it appends a new string to the existing URL(s).

To fix this problem, remove the += from the URL_ variables in your function 'myFunction' and assign values directly using '=' only.
Below is the updated code:

<h3>Links</h3> <br>
        <ul class="list">
            <div id="timetables"></div>
        </ul>

        <script>
        var xmlhttp = new XMLHttpRequest();
        var url = "https://api.myjson.com/bins/qg69t";
        var URL_1 = "";
        var URL_2 = "";

        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myArr = JSON.parse(this.responseText);
                myFunction(myArr);
            }
        };
        xmlhttp.open("GET", url, true);
        xmlhttp.send();

        function myFunction(arr) {
            var out = "";
            var i;
            for(i = 0; i < arr.length; i++) {
                URL_1 = arr[i].timetable_1_link;
                URL_2 = arr[i].timetable_2_link;
                out += '<div>' + arr[i].course + '</div><p><a href="#" onclick="openLinkInNewWindow_1()">' + arr[i].timetable_1_name + '</a></p><p><a href="#" onclick="openLinkInNewWindow_2()">' + arr[i].timetable_2_name + '</a></p>';
            }
            document.getElementById("timetables").innerHTML = out;
        }

        function openLinkInNewWindow_1() {
                window.open(URL_1, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes");
            }

        function openLinkInNewWindow_2() {
                window.open(URL_2, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes");
            }

        </script>

You can view the updated and active code by clicking here

Executing JavaScript - Triggering an 'onClick' event within a For loop to dynamically load multiple hyperlinks

Answer №1

Answer №2

Similar questions

"Empowering your scripting skills with PowerShell to manipulate JSON data

Retrieving live information from an API in order to populate a specific route

How to retrieve the current event handler's value with jQuery

Change the right border style for the second and third ToggleButtons in the ToggleButtonGroup

Issues with Angular functionality

What is the best way to compare two JSON strings in a Flutter application?

Reverting HTML entities in Json to their original characters

What is the process of querying both a collection and a subcollection in Firebase using AngularFire?

After the component has been initialized for the second time, the elementId is found to be null

Looking to switch up the thumbs-up button design?

The gear icon in the video player is not showing up when I try to change the

Retrieving metadata using breeze is taking too long

Laravel: The current configuration does not support the experimental syntax 'classProperties' at this time

What is the best way to calculate the total number of results using ajax?

Switch Your PHP Script to Use PDO

Utilize Hardhat and NPM to distinguish between unit tests and integration tests efficiently

Creating an object using JSON data?

AngularJS: ng-show causing flickering issue upon page refresh

Parsing JSON Data in Python

Learn how to upload an image from Express.js to Google Cloud Storage or Firebase Storage