0

I need to add links to an array of sentences: every time the user will click on the button a sentence from a list will appear. I need to insert to some of the sentences links. how can I do that?

this is the code:

var cnt = 0;

function callMe() {
  var Your_Sentences_Array = ['sentence0', 'sentence1', 'sentence2', 'sentence3'];
  var div = document.getElementById('idtxt');
  div.innerHTML = Your_Sentences_Array[cnt];
  cnt == Your_Sentences_Array.length - 1 ? cnt = 0 : cnt++;
}
<div class="game">
  <div dir="rtl" class="sentence" id="idtxt"> sentence </div>
  <button class="done" type="button" onclick="callMe()">Done!</button>
</div>

for example, I need that when sentence3 will appear it will be clickable and will lead to a different page.

I appreciate any help! thanks : )

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
nirshh5
  • 43
  • 1
  • 8

1 Answers1

2

You can check when sentence is sentence3, display it in a link like this

var cnt = 0;
  var Your_Sentences_Array = [
    {
      text: 'sentence0',
      link: false
    }, {
      text: 'sentence1',
      link: 'http://google.com/a'
    }, {
      text: 'sentence2',
      link: false
    }, {
      text: 'sentence3',
      link: 'http://google.com/b'
    }
  ];

  function callMe() {
    var div = document.getElementById('idtxt');
    var newSentence = Your_Sentences_Array[cnt];
    div.innerHTML = newSentence.link ? ('<a href="' +newSentence.link+ '">' + newSentence.text + '</a>') : newSentence.text;
    cnt == Your_Sentences_Array.length - 1 ? cnt = 0 : cnt++;
  }
<div class="game">
  <div dir="rtl" class="sentence" id="idtxt"> sentence </div>
  <button class="done" type="button" onclick="callMe()">Done!</button>
</div>

Hope this helps!

Van Tho
  • 618
  • 7
  • 20
  • This is great! thanks! But I'm trying to insert multiple links in this array. is there a way to do that? – nirshh5 Mar 19 '20 at 16:14
  • 1
    Is means you want to have link in sentence0 or sentence1? you can change Your_Sentences_Array from array of string to array of object like this: `Your_Sentences_Array = [{text: 'sentence0', link: 'https://google.com'}, {text: 'setence1', link: false}, ...]`, then you can check if `link` is not false, show it as a link. Is that what you want? – Van Tho Mar 20 '20 at 02:05
  • yes exactly ! thank you so much, can you give me an example of a function that checks if link? – nirshh5 Mar 20 '20 at 09:19
  • I've edited my snippet, now only sentence1 and sentence3 has a link, could you check it? – Van Tho Mar 20 '20 at 09:26
  • one last thing: is there a way to make the sentences to appear randomly? – nirshh5 Mar 20 '20 at 10:04
  • 1
    yes you can replace the last js line with `cnt = (Math.random() * (Your_Sentences_Array.length - 0)) << 0;` , I've found it here: https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range – Van Tho Mar 20 '20 at 10:18
  • 1
    The idea is make the cnt random, shuffle the array is another idea but it may slow when the size of array is bigger – Van Tho Mar 20 '20 at 10:19