0

Edit: what worked for me (as was suggested) was to use the arrays as arguments in the function call...

let navText = ['House', 'Food', 'Work'];
let navLinks = ['house.html', 'food.html', 'work.html'];





function navBuilder(id, textList, linkList) {

  // Getting the element with the id
  navList = document.getElementById(id);
  // let openTag = document.innerHTL

  // looping through the arrays and matching the text with the link
  for (let i = 0; i < textList.length; i++) {

    listItem = document.createElement('li');
    // adds classes
    listItem.className = id + '_list_item';
    linkClass = id + "_list_link";
    // put it all together
    listItem.innerHTML += "<a href=\"" + linkList[i] + "\" class=\"" + linkClass + "\">" + textList[i] + "</a></li>";
    navList.appendChild(listItem);
  }

}
// Call the function here or include it in a script tag at the end of the html.
navBuilder("nav", navText, navLinks);

Thanks for the help!

let navText = ['House', 'Food', 'Work'];
let navLinks = ['house.html', 'food.html', 'work.html'];





function navBuilder(id, textList, linkList) {

  // Getting the element with the id
  navList = document.getElementById(id);
  // let openTag = document.innerHTL

  // looping through the arrays and matching the text with the link
  for (let i = 0; i < textList.length; i++) {

    listItem = document.createElement('li');
    // adds classes
    listItem.className = id + '_list_item';
    linkClass = id + "_list_link";
    // put it all together
    listItem.innerHTML += "<a href=\"" + linkList[i] + "\" class=\"" + linkClass + "\">" + textList[i] + "</a></li>";
    navList.appendChild(listItem);
  }

}
// Call the function here or include it in a script tag at the end of the html.
navBuilder("nav", navText, navLinks);

It was just a slight modification to what I was doing to begin with. It was for sure a x and y problem

Allen Smith
  • 1
  • 1
  • 1
    Seems like [an XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). Why not simply pass the arrays to the function? Then you don't have to try to bend over backwards in order to have [variable variables](https://stackoverflow.com/questions/5187530/variable-variables-in-javascript) and it's reusable by calling it with whatever arguments you need at the time. – VLAZ Feb 20 '22 at 17:09
  • Kind of a confusingly worded question, but I'm pretty sure you're looking for [object bracket notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#bracket_notation) – Daniel Beck Feb 20 '22 at 17:10
  • @DanielBeck I don't see how bracket notation helps here. OP wants to dynamically generate the variable to use `navText` should be converted to `nav` followed by a variable that then forms what variable should be used. They cannot be resolved from any object. Not right now. Nor is adding them into an object a real solution here over simply passing the arrays. Otherwise you'd have some sort of growing global registry of all arrays to be used and you have to hand over indirect links to them in the form of identifier which *when changed* will have to match. – VLAZ Feb 20 '22 at 17:12
  • Probably that was too terse; I'm suggesting a Y to their XY problem. If they initialized their data as an array of objects with sensible keys instead of as a bunch of unrelated arrays, most of those problems go away; bracket notation can be used to construct identifiers or stuff them in other variables, as needed – Daniel Beck Feb 21 '22 at 15:48

0 Answers0