Accessing an Array With a String

Question

I have a function that opens a number of links in new tabs when a button is clicked. Function works by looping pop() through an array holding links, with button.innerText being used to access the proper array. While testing this, it worked. it was uploaded to github, published, and is still functional.

That same function, unchanged, does not work locally. Relevant code is below. Website is live @ http://smithfanclub.info.s3-website.us-east-2.amazonaws.com/

I am also interested to know if my idea is possible. The return from the pop() is a string, and a string can't access an array. Is there a succinct way to bypass this or is a string unconquerable in this scenario.

HTML

                <li><button class="generateNews" onclick="newsFunc(this)"> Mass </button></li>
                <li><button class="generateNews" onclick="newsFunc(this)"> Regional  </button></li>
                <li><button class="generateNews" onclick="newsFunc(this)"> National </button></li>
                <li><button class="generateNews" onclick="newsFunc(this)"> National2 </button></li>
                <li><button class="generateNews" onclick="newsFunc(this)"> Networks </button></li>
            </ul>

Function

function newsFunc(button) {
    let text = button.innerText;
    let National = ["https://www.msnbc.com/", "https://www.nbcnews.com/", "https://www.usnews.com/"];
    let National2 = ["https://thehill.com/", "https://www.politico.com/"]
    let Networks = ["https://www.wcvb.com/", "https://www.wgbh.org/", "https://whdh.com/news/local/"]
    var interval = setInterval(function() {
        let url = text.pop();
        if (url) {
            window.open(url);
        } else {
            clearInterval(interval);
        }
    }, 500);
}

score 0 · Accepted Answer · answered Jun 19 '20 at 04:51

You have similar code but the function you posted here is different than the one used in the website you linked. Here you are trying to call pop on a String which will result in a TypeError as String.prototype.pop does not exist. You are most likely looking to call pop on an Array instance as the website code does.

If you want to select an array based on some text, you should consider using a object. Here is an example that will console log each element in the selected array in the specified interval. I've kept the code very similar to your snippet - the primary difference being the use of an object arrays to access the desired array using button.innerText as the key.

function example (button) {
  const arrays = {
    ArrayOne: ['1a', '1b', '1c'],
    ArrayTwo: ['2a', '2b']
  }

  const array = arrays[button.innerText]

  if (array) {
    const interval = setInterval(function () {
      let el = array.pop()
      
      if (el) {
        console.log(el)
      } else {
        clearInterval(interval)
      }
    }, 500)
  }
}

<button onclick="example(this);">ArrayOne</button>
<button onclick="example(this);">ArrayTwo</button>

First, thanks so much. I feel like I learned a bit from this. I think learning when and how to use objects is one of many steps my code needs - so thank you. I do have a question though. I would assume that the button.innerText would return a string. so you'd get array[ 'arrayOne' ]. Am I wrong to assume that .innerText returns a string? — Airrivas, Jun 22 '20 at 02:09
on the off chance anyone sees this and has the same question regarding the return value of button.innerText, I've found this that's answered that question. https://stackoverflow.com/questions/19030742/difference-between-innertext-and-innerhtml — Airrivas, Jun 22 '20 at 22:52
@Airrivas yes `button.innerText` is a `String` so in the above example `arrays[button.innerText]` is the same as `arrays['ArrayOne']` assuming the ArrayOne button is clicked. — Damon, Jun 24 '20 at 14:27

Accessing an Array With a String

1 Answers1