Question

我正在尝试根据所选内容更改输入元素（url）的值选项（选择方面）：

<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

您的错误来自于您的函数与您的select 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>

Answer 2

已编辑

您输入的没有您当前要查找的ID，需要从

更改

<input id="url" name="ebscohosturl" type="text" value="" />

到

<input id="ebscohosturl" name="ebscohosturl" type="text" value="" />

工作示例：

<script>
  function facetselection(e) {
    document.getElementById("ebscohosturl").value = e.target.value;
  }
</script>

<input id="ebscohosturl" 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>`

Answer 3

您可以直接传递值

您还通过id获取元素，但传递了输入名称

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

<input id="url" name="ebscohosturl" type="text" value="" />
<div id="facets">
  <select id="facetselection" onchange="facetselection(this.value)">
    <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>

根据所选的选项错误更改输入值：不是函数

3 个答案: