2016-03-13 2 views
1

У меня есть сценарий генератора случайных котировок, и мне нужно добавить гиперссылки для каждой цитаты. Проблема - я не могу понять, как это сделать для жизни меня.Как добавить гиперссылку в массив (Javascript)

Я новичок в javascript, но после поиска, считая, что есть легкое решение моей проблемы, я не могу найти приемлемый ответ на этот вопрос.

Как мне добавить гиперссылку в массив? Я был бы признателен. Это, наверное, так просто.

Вот страница генератора случайных котировок, и я разместил код ниже. Спасибо. https://www.hscripts.com/scripts/JavaScript/random-quote-generator.php

Я также разместил код ниже.

<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> 

ответ

0

Вы можете сохранить html-код в своем массиве, например.

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

Но я не предпочитаю микс html-код с js. Посмотрите на мое решение по JSFiddle https://jsfiddle.net/xoL2bbtd/

Я немного исправила массив и добавить функцию

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); 
} 

создать якорный элемент и набор HREF атрибута. В массиве я сохраняю объект, который содержит текст и свойство ссылки

И еще одно. Создание массива с использованием нового массива происходит медленнее, чем при использовании []. Проверьте это https://jsperf.com/new-array-vs-literal/15

+0

Роб, это прекрасно! Спасибо за такой простой ответ. – john

+0

Я забыл спросить - как мне это сделать, чтобы ссылка открылась на новой вкладке? Я знаю, что в html это target = "_ blank", но после поиска 25 минут я не могу понять, как реализовать это в javascript. Извините, мне жаль, что я не упомянул об этом заранее. – john

+0

Итак, я провел некоторое тестирование, и я понял, что работает - чтобы ссылки открывались на новой вкладке. Я добавил новую строку в код: chi.setAttribute ('target', '_blank'); .... Я полагаю, что это правильно, поскольку это сработало. – john

Смежные вопросы