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

Firestore version 9 - Retrieve nested collection depending on a string being present in an array

Mastering the art of concurrent Ajax requests using jQuery for an advanced Posting and Commenting system

Downloading PDF files on IOS while using Angular often results in the PDF opening in the same

Watch the Newest Vimeo Showcase Reel

Accessing PUT/POST/DELETE endpoints directly from the backend through the browser without the need for UI connectivity

Is it truly possible to return a reactive variable that updates its value asynchronously?

transform a JSON object into a targeted JSON array

Filter the array and determine the number of elements in the filtered array

The ajax function does not provide a response

Experience real-time updates on webpages with Node.js and Socket.io

The backend is not receiving the AJAX post, which utilizes dynamically-generated JSON

I can't seem to shake off this constant error. Uncaught TypeError: Unable to access property 'classList' of null

Enhancing OpenAI API Responses with WebSocket Streaming through Express Middleware Integration

What is the best approach in AngularJS for implementing a browser modal that returns a promise?

Managing and extracting specific information from a complex JSON dataset on an Android device

What could be causing the show button to change its style every time I click it?

Is there a way to merge all this data into a single Object?

React's Material-UI AppBar is failing to register click events

Swap out the image backdrop by utilizing the forward and backward buttons

The Comparison of Time Complexity between Dynamic Array Pushing and Assigning to a Fixed Size Array in JavaScript