How to build links with fragments taken from text fields, but within a JavaScript to randomize them before open each of them on its own tab

I’m trying to make one single JavaScript able to randomize several links which must be built with fragments taken from text fields, before opening each of them on its own tab, by clicking a button.

I know 2 different JavaScripts to separately do both things:

• a) build URLs with fragments taken from text fields
  
• b) randomize several links before opening each of them on its own tab
  

But I can’t find a working way to blend the 2 of them together in one single JavaScript.

I have tried several options to accomplish this, but I’m not an expert at all, so I keep failing and failing.

Wishing to make this post easier to be understood, I did a fiddle for it, but unfortunately links from fiddle are usually blocked on many websites, therefore I used w3schools pages instead, to make my example able to work properly:
https://www.w3schools.com/code/tryit.asp?filename=GT70R73WAL8A

My code so far is this:

var srchTwtrClbrts = [
    { url: "https://twitter.com/search?q= from:ddlovato since:"+a+" until:"+b+" "+c+" " },
    { url: "https://twitter.com/search?q= from:jtimberlake since:"+a+" until:"+b+" "+c+" " },
    { url: "https://twitter.com/search?q= from:selenagomez since:"+a+" until:"+b+" "+c+" " },
    { url: "https://twitter.com/search?q= from:ArianaGrande since:"+a+" until:"+b+" "+c+" " },
    { url: "https://twitter.com/search?q= from:taylorswift13 since:"+a+" until:"+b+" "+c+" " },
    { url: "https://twitter.com/search?q= from:rihanna since:"+a+" until:"+b+" "+c+" " },
    { url: "https://twitter.com/search?q= from:katyperry since:"+a+" until:"+b+" "+c+" " },
    { url: "https://twitter.com/search?q= from:justinbieber since:"+a+" until:"+b+" "+c+" " },
 ];

var a=$("#searchSince").val(),b=$("#searchUntil").val(),c=$("#searchLiveOrTop").val();

$('#searchTwitterAccounts').click(function(searchTwitterAccounts) {
  for (var i = 0; i < srchTwtrClbrts.length; i++) {
      var order = Math.floor(Math.random() * 1000) + 1 
      srchTwtrClbrts[i].order = order;
  }

  srchTwtrClbrts.sort(function (a, b) {
      return (a.order - b.order);
  })

  for (var i = 0; i < srchTwtrClbrts.length; i++) {
      window.open(srchTwtrClbrts[i].url);
  }

})

At the w3schools page, you will need to click on Run » to watch the following:

and then choose the content for each of the 3 fields.

If it helps in anyway, I suspect my problem is not having this line correctly located:

var a=$("#searchSince").val(),b=$("#searchUntil").val(),c=$("#searchLiveOrTop").val();

as the resulting URLs keep saying “undefined“

I’m open to all suggestions, even to modify this script completely, so please feel free to suggest anything.
All suggestions are welcome as all of them help a lot.

Thank you in advance.

Answer

The problem is that when form data has been changed you never update the srchTwtrClbrts, So you need to listen to any change of text box and update the srchTwtrClbrts.

I add formChange class to main div and then listen to change of that:

<div class="formChange" name="searchCelebrities" id="searchCelebrities" style="display: flex; width: 400px; margin: 15px; height: 28px; text-align: center; border-radius: 5px; border: 1px gray dotted; background-color: #e2e2e2; padding: 5px 0 0 5px;">
        <span style="position: relative; top: 1px; margin-right: 5px;">from:</span>
        <form id="form-searchSince" style="margin-right: 5px;">
            <input type="text" id="searchSince" class="SrchTwtr" style="width: 100px !important; margin-right: 5px;">
        </form>
        <span style="position: relative; top: 1px; margin-right: 5px;">until:</span>
        <div id="form-searchUntil" style="margin-right: 5px;">
            <input type="text" id="searchUntil" class="SrchTwtr" style="width: 100px !important; margin-right: 5px;">
        </div>
        <form id="form-searchLiveOrTop">
            <label for="searchLiveOrTop"></label>
            <select id="searchLiveOrTop" name="searchLiveOrTop" class="SrchTwtr" style="width: 65px !Important; font-size: 0.85em !Important; padding-left: 0px !Important;">
                <option value=" ">Top</option>
                <option value="&f=live">Latest</option>
                <option value="&f=user">People</option>
                <option value="&f=image">Photos</option>
                <option value="&f=video">Videos</option>
            </select>
        </form>
</div>

And in script I create a function to update the srchTwtrClbrts when any changes happen:

var a = $("#searchSince").val(), b = $("#searchUntil").val(), c = $("#searchLiveOrTop").val();

var srchTwtrClbrts = [
    { url: "https://twitter.com/search?q= from:ddlovato since:" + a + " until:" + b + " " + c + " " },
    { url: "https://twitter.com/search?q= from:jtimberlake since:" + a + " until:" + b + " " + c + " " },
    { url: "https://twitter.com/search?q= from:selenagomez since:" + a + " until:" + b + " " + c + " " },
    { url: "https://twitter.com/search?q= from:ArianaGrande since:" + a + " until:" + b + " " + c + " " },
    { url: "https://twitter.com/search?q= from:taylorswift13 since:" + a + " until:" + b + " " + c + " " },
    { url: "https://twitter.com/search?q= from:rihanna since:" + a + " until:" + b + " " + c + " " },
    { url: "https://twitter.com/search?q= from:katyperry since:" + a + " until:" + b + " " + c + " " },
    { url: "https://twitter.com/search?q= from:justinbieber since:" + a + " until:" + b + " " + c + " " },
];

$(".formChange").change(function () {
    var a = $("#searchSince").val(), b = $("#searchUntil").val(), c = $("#searchLiveOrTop").val();
    upadteUrL(a, b, c);
});

function upadteUrL(a, b, c) {
    srchTwtrClbrts = [
        { url: "https://twitter.com/search?q= from:ddlovato since:" + a + " until:" + b + " " + c + " " },
        { url: "https://twitter.com/search?q= from:jtimberlake since:" + a + " until:" + b + " " + c + " " },
        { url: "https://twitter.com/search?q= from:selenagomez since:" + a + " until:" + b + " " + c + " " },
        { url: "https://twitter.com/search?q= from:ArianaGrande since:" + a + " until:" + b + " " + c + " " },
        { url: "https://twitter.com/search?q= from:taylorswift13 since:" + a + " until:" + b + " " + c + " " },
        { url: "https://twitter.com/search?q= from:rihanna since:" + a + " until:" + b + " " + c + " " },
        { url: "https://twitter.com/search?q= from:katyperry since:" + a + " until:" + b + " " + c + " " },
        { url: "https://twitter.com/search?q= from:justinbieber since:" + a + " until:" + b + " " + c + " " },
    ];
}

$('#searchTwitterAccounts').click(function (searchTwitterAccounts) {
    for (var i = 0; i < srchTwtrClbrts.length; i++) {
        var order = Math.floor(Math.random() * 1000) + 1
        srchTwtrClbrts[i].order = order;
    }

    srchTwtrClbrts.sort(function (a, b) {
        return (a.order - b.order);
    })

    for (var i = 0; i < srchTwtrClbrts.length; i++) {
        window.open(srchTwtrClbrts[i].url);
    }
})