javascript: pass array in onchange function

Question

I'm trying to pass an array in an onchange function but running into errors.

The function is in the head tag as:

<script>
        function displayReference(rA) {
            var rsb = document.getElementById("refSelectBox");
            var id = rsb.value;
            dr = document.getElementById("display-ref");
            dr.innerHTML = '</br>' + rA[id];
            return true;
        }
    </script>

where rA should be an array. I've tried two different ways of sending the rA array through onchange:

1.

<select class="selectResults" id="refSelectBox" onchange=displayReference(this.refArray)>

(produces "TypeError: undefined is not an object (evaluating 'rA[id]')")

2.

<select class="selectResults" id="refSelectBox" onchange=displayReference(refArray)>

(produces "ReferenceError: Can't find variable: refArray").

Through a console.log(refArray) just before producing the select box code, I know that refArray exists and is populated.

If it's any help in providing answers, this is all in the environoment for a MS Word add-in.

Thanks for any help in advance.

The error messages are correct. What is `this.refArray` where `this` is a select? Where is `refArray` where it seems to have to be a global variable? — mplungjan, Feb 01 '21 at 06:45
Please click edit, then UPDATE your first snippet to provide a [mcve] with the refArray and relevant HTML - for example what is rsb.value resolving to? — mplungjan, Feb 01 '21 at 06:46
Lastly, do you have more than one select and does each select need to pass its own refArray? Like refArray1 for refSelectBox1 and refArray2 for refSelectBox2? If not, don't pass anything, use unobtrusive event listener and access the refArray in the function instead of having inline handlers — mplungjan, Feb 01 '21 at 06:49
As this is a Word add-in it's pretty much impossible to provide a minimal reproducible example (functionality is scattered across multiple files). The select is dynamically generated in a javascript file where, globally var refArray = []; (Word add-in: taskpane.js). The displayReference() is in the head of the HTML script where the select/options are inserted (Word add-in: taskpane.html). I've found a way around this issue using hidden fields but would rather pass the array. I have no experience with event listeners ;) — Mark Grimshaw-Aagaard, Feb 01 '21 at 07:45
refArray is populated before the select is generated. There is only one select. — Mark Grimshaw-Aagaard, Feb 01 '21 at 07:46
Well it seems it is not. I do not have experiences with word add-ins — mplungjan, Feb 01 '21 at 07:48
I found something that might help: https://stackoverflow.com/questions/58121326/window-addeventlistener-does-not-work-in-word-add-in-when-called-from-manifest-c — mplungjan, Feb 01 '21 at 07:49
refArray is definitely populated. If I put this before the select is generated: for (i = 0; i < 10; i++) { refArray[i] = i; } console.log(refArray); then I get: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] (10) in the console. The link you provided might be of some help if I could understand it. I do think my issue might be something similar in that there seem to be different working spaces for different scripts. But I really would have thought that a populated array could be passed to another function in the head section of an HTML file. — Mark Grimshaw-Aagaard, Feb 01 '21 at 08:58
Many thanks for all the help. I think order of element generation is the issue. refArray is populated before the generation of the dynamically generated select tag and its options. In the end, I found a way around by using hidden input (I could have used sessionStorage or localStorage). — Mark Grimshaw-Aagaard, Feb 02 '21 at 05:48

score 0 · Answer 1 · answered Feb 01 '21 at 09:01

I suggest this - it will test there is a refArray and also pass the select to the function.

function displayReference(rsb) {
  if (refArray && refArray.length>0) {
    var id = rsb.value;
    var dr = document.getElementById("display-ref");
    dr.innerHTML = '</br>' + refArray[id];
  }
}

and then use

<select class="selectResults" id="refSelectBox" onchange="displayReference(this)">

score 0 · Answer 2 · answered Feb 01 '21 at 09:01

Since you are not providing where you are defining refArray I think the issue could be the order of it:

Ensure to define refArray before your select tag

<script>
    var refArray = ["Value One", "Value Two"]
</script>

<select class="selectResults" id="refSelectBox" onchange=displayReference(refArray)>
    <option>0</option>
    <option>1</option>
</select>

<p id="display-ref"></p>

<script>
    function displayReference(rA) {
        var rsb = document.getElementById("refSelectBox");
        var id = rsb.value;
        dr = document.getElementById("display-ref");
        dr.innerHTML = rA[id];
        return true;
    }
</script>

If this isn't possible you could simplify your solution by using a string to get an array which you define below (in your js). You can convert this string to a variable. Read more about that here.

<select class="selectResults" id="refSelectBox" onchange="displayReference('refArray')">
  <option>0</option>
  <option>1</option>
</select>

<p id="display-ref"></p>

<script>
  var refArray = ["Value One", "Value Two"]

  function displayReference(rA) {
    var rsb = document.getElementById("refSelectBox");
    var id = rsb.value;
    dr = document.getElementById("display-ref");
    dr.innerHTML = window[rA][id];
    return true;
  }
</script>

javascript: pass array in onchange function

2 Answers2