How to add hyperlink in array (Javascript)

Question

I have a random quote generator script, and I need to add hyperlinks for each quote. The issue - I can't figure out how to accomplish this for the life of me.

I'm a novice in javascript but after searching around, thinking there's an easy solution to my problem, I can't find a workable answer to this.

How do I go about adding a hyperlink in an array? I'd appreciate this. It's probably so simple too.

Here's the page to the random quote generator, and I posted the code below. Thank you. https://www.hscripts.com/scripts/JavaScript/random-quote-generator.php

I posted the code below as well.

<style>
    .row {
        padding-left: 10px;
        background-color: white;
        font-family: verdana, san-serif;
        font-size: 13px;
    }
</style>

<!-- Script by hscripts.com -->
<script type="text/javascript">
    var arr = new Array();

    arr.push("Javascript is different from Java");
    arr.push("Javascript is different from Java");
    arr.push("Javascript is different from Java");
    arr.push("CSS - Cascading Style Sheet");
    arr.push("HTML is a platform independent language");

    function rotate() {
        var num = Math.round(Math.random() * 3);
        add(num);
    }

    function add(i) {
        var chi = document.createTextNode(arr[i]);
        var tab1 = document.getElementById("add1");
        while (tab1.hasChildNodes()) {
            tab1.removeChild(tab1.firstChild);
        }
        tab1.appendChild(chi);        
    }
</script>
<!-- Script by hscripts.com -->

<table align=center style="background-color:#C0C0C0">
    <tr>
        <td background-color:#c0c0c0 align=center width=300 style="font-family:Times New Roman;">
            <b>Random Quote Generator</b>
        </td>
    </tr>
    <tr>
        <td id=add1 class=row width=300 align=center>Click Next to Display Random message</td>
    </tr>
    <tr>
        <td align=center>
            <input type=button value="Next" border=0 onclick="rotate()">
        </td>
    </tr>
</table>

RobHil · Accepted Answer · 2016-03-13 20:40:17Z

1

You can keep html code in your array e.g.

arr.push('<a href="http://google.pl">CSS</a>');

But I don't prefer mix html code with js. Look at my solution on JSFiddle https://jsfiddle.net/xoL2bbtd/

I little modified your array and add function

function add(i) {
 var chi = document.createElement('a');
 chi.textContent = arr[i].text;
 chi.setAttribute('href', arr[i].link);
 var tab1 = document.getElementById("add1");
 if (tab1.hasChildNodes()) {
  tab1.removeChild(tab1.firstChild);
 }
 tab1.appendChild(chi);
}

I create anchor element and set href attribute. In array I keep object which contains text and link property

And one more thing. Create array by using new Array is slower than using []. Check this https://jsperf.com/new-array-vs-literal/15

answered Mar 13, 2016 at 20:40

RobHil

1161 bronze badge

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

3 Comments

john Over a year ago

Rob, this is perfect! Thank you for such a straightforward answer.

john Over a year ago

I forgot to ask - how do I have it so the link opens in a new tab? I know in html it's target="_blank" but after searching 25 minutes, I can't seem to figure out how to implement this in javascript. Sorry - I wished I mentioned that beforehand.

john Over a year ago

So I did some testing, and I figured out something that works - to make the links open in a new tab. I added a new line in the code: chi.setAttribute('target', '_blank'); .... I suppose that correct as it worked.

Collectives™ on Stack Overflow

How to add hyperlink in array (Javascript)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related