0

I want to update an anchor button's href value when the associated drop-down list is updated to a different value. I try to change the menu item and I get an error telling me that the value of the selected list item is undefined, even though at the beginning there are defined values. Even submitting the default values does not work. If someone could assist me with what I am doing wrong that would be greatly appreciated.

Sample of an HTML div I'm trying to get to work (There are several divs on the page like this, which is why I'm using the class list in the JS instead of the ID):

        <div class="yearcontainer catalogue">
          <h2>CCRC 2017 Meeting Minutes</h2>
          <div class="listgui">
              <label for="2017input">Select from the 2017 list: </label>
              <select id="2017input" class="dropdowns" name="2017input">
                <option value="files/2017/010417.pdf">January 4, 2017</option>
                <option value="files/2017/010417 Budget Workshop.pdf">January 4, 2017 Workshop</option>
                <option value="files/2017/020317.pdf">February 3, 2017</option>
                <option value="files/2017/021517.pdf">February 15, 2017</option>
                <option value="files/2017/030117.pdf">March 1, 2017</option>
                <option value="files/2017/040517.pdf">April 5, 2017</option>
                <option value="files/2017/041917.pdf">April 19, 2017</option>
                <option value="files/2017/050317 rev.pdf">May 3, 2017</option>
                <option value="files/2017/060717.pdf">June 7, 2017</option>
                <option value="files/2017/070517.pdf">July 5, 2017</option>
                <option value="files/2017/080217.pdf">August 2, 2017</option>
                <option value="files/2017/090617.pdf">September 6, 2017</option>
                <option value="files/2017/092717.pdf">September 27, 2017</option>
                <option value="files/2017/100317 Workshop.pdf">October 3, 2017 Workshop</option>
                <option value="files/2017/110117.pdf">November 1, 2017</option>
                <option value="files/2017/120617.pdf">December 6, 2017</option>
              </select>
              <a href="" class="onpagelink" target="_blank">Go..</a>
          </div>
        </div>

And the associated JS:

var linkButtons = document.querySelectorAll(".onpagelink");
var linkDropDowns = document.querySelectorAll(".dropdowns");



for(i=0; i<linkDropDowns.length; i++) {
    linkDropDowns[i].addEventListener("change", function() {
        linkButtons[i].href = linkDropDowns[i].value;
    });
}
Justin McCown
  • 43
  • 4
  • I'm not sure why this question was closed, it's not a duplicate of the linked issue. You do have a few problems though: You're treading the single `a` tag and `select` tag like they're arrays, and you're assuming the `change` event is the best way to go. Instead, you could use a button (or keep it as an `a` tag) and do this, which would be easier: `var link = document.querySelector('.onpagelink'); var select = document.querySelector('dropdowns'); link.onclick = function () { window.location.href = select.value };` – Zac Anger Jan 08 '21 at 22:38
  • It's because there are multiple divs in the greater page similar to this one, so I'm trying to iterate over each one. For some reason, when I go to assign the value of each select to its respective anchor button it seems to forget the value of all of the select elements. – Justin McCown Jan 08 '21 at 23:20
  • 1
    What makes you think that this is not a duplicate @ZacAnger? The issue here is the scope of `i`. Because it is not scoped to the body of the for-loop, `i` keeps incrementing until the loop is finished. By the time the change event occurs, `i` has the value of `linkDropDowns.length` so `linkButtons[i]` will be one above the last element in the collection, hence it is `undefined`. Changing `i=0` to `let i = 0` fixes the issue. I believe this is explained fine in the duplicate. (And if not, it is explained fine in the duplicate of the duplicate.) – Ivar Jan 08 '21 at 23:31
  • 1
    I stand corrected, it is explained in the duplicate-duplicate @Ivar. – Zac Anger Jan 08 '21 at 23:36
  • Thank you @Ivar ! I still have some trouble with scope in JS, I can't believe I missed such a simple issue! I guess I should have looked more closely before posting the question. Nevertheless, I thank you both. – Justin McCown Jan 08 '21 at 23:38

0 Answers0