javascript：在 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.

Answer 1

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)">

Answer 2

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>