JavaScript - Calling an 'onClick' function from a For loop loading multiple links

Question

I am in the process of creating a listview from JSON data however, after calling an 'onclick' function from a For loop, the link, which opens up in a new window, loads three URLs into the URL input of the browser. Any idea how I could re-work the below code to just load one link rather that the three based on the below 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;
                    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><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>

Vincent Ramdhanie · Accepted Answer · 2017-05-22 21:09:53Z

1

You can start by refactoring the function that opens the URL to accept a parameter like this:

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

Then in the for loop pass the URL along 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 way you only need the one function. Notice also that I removed the + from the URL_1 += line.

answered May 22, 2017 at 21:09

Vincent Ramdhanie

103k23 gold badges143 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vincent Ramdhanie Over a year ago

But do all the links go to the right place? I suspect that all the links go to the last link in the array if you did not make the other changes.

breakit · Accepted Answer · 2017-05-22 21:22:49Z

Using URL_1+= is culprit here. Every time loops run it appends new string to existing url(s).

So remove += from URL_ variables in your function 'myFunction' and assign values directly by using '=' only.
Updated code is written below

 <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 take a look for updated and running code here

Collectives™ on Stack Overflow

JavaScript - Calling an 'onClick' function from a For loop loading multiple links

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related