Assigning string into the button every time page refreshes

Question

this code successfully shuffles the phone numbers order every time pages refreshes. What I'm trying to do is create a Call us button that selects a phone number from the "var = arr" array and assign that to the button but when page refreshes assigned number from the button has to be changed so that way customer could call a different number every time.

$(document).ready(function() {
  function shuffle(array) {
    var currentIndex = array.length,
      temporaryValue, randomIndex;

    while (0 !== currentIndex) {

      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  }

  var arr = ['<div class="class1"><a href="tel:+17866331938"><p>+1 786 633 19 38</p></a></div>',
    '<div class="class2"><a href="tel:+17866331298"><p>+1 786 633 12 98</p></a></div>',
    '<div class="class3"><a href="tel:+17866331903"><p>+1 786 633 19 03</p></a></div>',
    '<div class="class4"><a href="tel:+17865741168"><p>+1 786 574 11 68</p></a></div>'
  ];
  arr = shuffle(arr);
  arr.map(function(k, v) {
    $(".div-wrap").append(k);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="div-wrap"></div>

What's the question? Please see [ask] and take the [tour]. – isherwood Apr 14 '22 at 15:39 — isherwood, Apr 14 '22 at 15:39

isherwood · Accepted Answer · 2022-04-14T16:01:48.677

Your array should contain phone numbers, not elaborate HTML structures.
forEach is a better method here. You don't need keys, and you don't need a new array.
We'll simply remove whitespace characters for the href attribute values.
Anchors should not contain paragraphs. While it may be allowed by HTML5 spec, it's an odd arrangement.
You might not need jQuery. I love jQuery and used it heavily back during the dark ages of browser standards, but it's less and less necessary.

Key concepts:

document.addEventListener('DOMContentLoaded', function() {
  function shuffle(array) {
    var currentIndex = array.length,
      temporaryValue, randomIndex;

    while (0 !== currentIndex) {
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  }

  var arr = ['1 786 633 19 38', '1 786 633 12 98', '1 786 633 19 03', '1 786 574 11 68'];
  arr = shuffle(arr);

  arr.forEach(function(v) {
    const el = `<p><a href="tel:+${v.replace(/ /g,'')}">+${v}</a></p>`;
    document.querySelector(".div-wrap").insertAdjacentHTML('beforeend', el);
  });
});

<div class="div-wrap"></div>

Thank you for your response, how can I assign these phone numbers into a button that can make a direct call with an click. — mbkadoglu, Apr 14 '22 at 16:30
They are, as shown above. Did you click them? That's what `tel` does. You wouldn't use a button. That's the wrong type of element for that action. You can, however, _style_ the anchors as buttons. — isherwood, Apr 14 '22 at 18:11
And please do take the [tour] so you know how to respond to answers on this site. — isherwood, Apr 14 '22 at 18:12

Assigning string into the button every time page refreshes

1 Answers1