javascript：在 onchange 函数中传递数组答案

【问题标题】：javascript: pass array in onchange functionjavascript：在 onchange 函数中传递数组
【发布时间】：2021-02-01 06:38:57
【问题描述】：

我正在尝试在 onchange 函数中传递一个数组，但遇到了错误。

函数在head标签中为：

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

其中 rA 应该是一个数组。我尝试了两种通过 onchange 发送 rA 数组的不同方法：

1。

&lt;select class="selectResults" id="refSelectBox" onchange=displayReference(this.refArray)&gt;

（产生“TypeError: undefined is not an object (evalating 'rA[id]')”）

&lt;select class="selectResults" id="refSelectBox" onchange=displayReference(refArray)&gt;

（产生“ReferenceError：找不到变量：refArray”）。

在生成选择框代码之前通过 console.log(refArray)，我知道 refArray 存在并已填充。

如果在提供答案方面有任何帮助，这一切都在 MS Word 插件的环境中。

提前感谢您的帮助。

【问题讨论】：

错误信息是正确的。什么是this.refArray，其中this 是一个选择？ refArray 在哪里，它似乎必须是一个全局变量？
请点击编辑，然后更新您的第一个 sn-p 以提供带有 refArray 和相关 HTML 的 minimal reproducible example - 例如 rsb.value 解析为什么？
最后，您是否有多个选择，每个选择是否需要传递自己的 refArray？像 refArray1 用于 refSelectBox1 和 refArray2 用于 refSelectBox2？如果没有，不要传递任何东西，使用不显眼的事件监听器并访问函数中的 refArray，而不是使用内联处理程序
由于这是一个 Word 插件，因此几乎不可能提供一个最小的可重现示例（功能分散在多个文件中）。选择是在 javascript 文件中动态生成的，其中全局 var refArray = []; （Word 插件：taskpane.js）。 displayReference() 位于插入选择/选项的 HTML 脚本的头部（Word 插件：taskpane.html）。我找到了使用隐藏字段解决此问题的方法，但宁愿传递数组。我没有使用事件监听器的经验；）
refArray 在生成选择之前填充。只有一个选择。

标签： javascript onchange word-addins

【解决方案1】：

我建议这样做 - 它会测试是否存在 refArray 并将选择传递给函数。

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

然后使用

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

【讨论】：

【解决方案2】：

由于您没有提供定义 refArray 的位置，我认为问题可能在于它的顺序：

确保定义 refArray 在您的选择标签之前

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

如果这不可能，您可以通过使用 字符串来获取您在下面定义的数组（在您的 js 中）来简化您的解决方案。您可以将此字符串转换为变量。阅读更多关于 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>

【讨论】：