javascript - 根据所选选项错误更改输入值 : is not a function

Question

我正在尝试根据所选的更改输入元素 (url) 的值 选项(facetselection):

<script src="external.js" type="text/javascript"></script>
<script>
function facetselection(e) {
document.getElementById("ebscohosturl").value = e.target.value;
}
</script>

<input id="url" name="ebscohosturl" type="hidden" value="" />
<div id="facets">
  <select id="facetselection" onchange="facetselection(event)">
    <option id="nofacet" value="new_url" label="הכל">הכל</option>
    <option id="facetarticles" value="new_url2" label="מאמרים אקדמיים">מאמרים אקדמיים</option>
    <option id="facetbooks" value="new_url3" label="ספרים">ספרים</option>
    <option id="facetebooks" value="new_url4" label="ספרים אלקטרוניים">ספרים אלקטרוניים</option>
    <option id="facetthesis" value="new_url5" label="תזות">תזות</option>
    <option id="facetmaps" value="new_url6" label="מפות">מפות</option>
  </select>
</div>

这是基于找到的解决方案 here .我也试过this解决方案。 我收到一个错误:

Uncaught TypeError: facetselection is not a function
    at HTMLSelectElement.onchange

我错过了什么？我在脚本元素中定义了函数，我认为语法是正确的。

Answer 1

您的错误来自于您的函数与您的选择 ID 同名:facetselection。发生这种情况是因为您的选择是在一种形式中(它不在您的原始代码示例中)。

重命名您的函数或您的选择 ID，您应该没问题。

它实际上是 Why JS function name conflicts with element ID? 的副本 但我不能标记它。

具有可重现行为的代码段:

function facetselection(e) {
  document.getElementById("url").value = e.target.value;
}

<form>
<input id="url" name="ebscohosturl" type="text" value="" />
<div id="facets">
  <select id="facetselection" onchange="facetselection(event)">
    <option id="nofacet" value="new_url" label="הכל">הכל</option>
    <option id="facetarticles" value="new_url2" label="מאמרים אקדמיים">מאמרים אקדמיים</option>
    <option id="facetbooks" value="new_url3" label="ספרים">ספרים</option>
    <option id="facetebooks" value="new_url4" label="ספרים אלקטרוניים">ספרים אלקטרוניים</option>
    <option id="facetthesis" value="new_url5" label="תזות">תזות</option>
    <option id="facetmaps" value="new_url6" label="מפות">מפות</option>
  </select>
</div>
</form>

更正的片段

function facetSelection(e) {
  document.getElementById("url").value = e.target.value;
}

<form>
<input id="url" name="ebscohosturl" type="text" value="" />
<div id="facets">
  <select id="facetselection" onchange="facetSelection(event)">
    <option id="nofacet" value="new_url" label="הכל">הכל</option>
    <option id="facetarticles" value="new_url2" label="מאמרים אקדמיים">מאמרים אקדמיים</option>
    <option id="facetbooks" value="new_url3" label="ספרים">ספרים</option>
    <option id="facetebooks" value="new_url4" label="ספרים אלקטרוניים">ספרים אלקטרוניים</option>
    <option id="facetthesis" value="new_url5" label="תזות">תזות</option>
    <option id="facetmaps" value="new_url6" label="מפות">מפות</option>
  </select>
</div>
</form>