2

I am trying to change the value of an input element (url) based on a selected option (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>

This is based on the solution found here. I also tried this solution. I am getting an error:

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

What am I missing? I defined the function in a script element, and I think the syntax is correct.

Nimrod Yanai
  • 777
  • 2
  • 8
  • 30
  • @Guillaume Georges The mistake was in writing the code, it is not what caused the error. In my code, the IDs are the same. I already corrected the OP, and the issue is still not resolved by the answers thus far. – Nimrod Yanai Jul 11 '18 at 23:12
  • The For sure that tag is not loaded for some reason, but I'm not sure why. – Nimrod Yanai Jul 11 '18 at 23:30
  • I also tried to add the function directly in the external javascript, but it didn't work either for some unknown reason. – Nimrod Yanai Jul 11 '18 at 23:32
  • It shows status 200 OK, so I assume it was loaded successfully – Nimrod Yanai Jul 11 '18 at 23:36
  • The answer worked with the parameters I requested - if I check the code snippet specifically, it works. But it doesn't work in my main code, I assume because the script element doesn't load for some reason, but I'm not sure why. – Nimrod Yanai Jul 11 '18 at 23:39
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/174842/discussion-between-guillaume-georges-and-nimrod-yanai). – Guillaume Georges Jul 11 '18 at 23:42
  • Ok, thank you. I am there. Didn't know the chat existed – Nimrod Yanai Jul 11 '18 at 23:46
  • 2
    Possible duplicate of [Why JS function name conflicts with element ID?](https://stackoverflow.com/questions/9158238/why-js-function-name-conflicts-with-element-id) – Nimrod Yanai Jul 12 '18 at 00:08
  • The issue was spotted in chat. And it appears this is a duplicate. The OP flagged it. – Guillaume Georges Jul 12 '18 at 00:11

3 Answers3

4

Your error comes from the fact that your function has the same name as your select id : facetselection. It happens because your select is in a form (which it wasn't in your original code example).

Rename either your function or your select id and you should be fine.

It's actually a duplicate of Why JS function name conflicts with element ID? but I can't flag it.

Snippet with reproductible behaviour : 

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>

Corrected snippet

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>
Guillaume Georges
  • 3,878
  • 3
  • 14
  • 32
  • Sorry, that is of course a mistake made by clipping my original code to just the relevant part. I corrected the original post. In my code the IDs were correct. – Nimrod Yanai Jul 11 '18 at 23:07
  • No, the mistake was when copying the code here, not in the original. In the original the IDs are the same :D I corrected the OP – Nimrod Yanai Jul 11 '18 at 23:13
2

EDITED

You're input doesn't have the id you are currently looking for, it needs to change from

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

to

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

working example:

<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>`
Joe Lissner
  • 2,181
  • 1
  • 15
  • 21
  • This removed the error message, but the function is not working (the value does not change). – Nimrod Yanai Jul 11 '18 at 22:58
  • Fixed the answer – Joe Lissner Jul 11 '18 at 23:03
  • Sorry, that is of course a mistake (I changed the id in the original post. In the code itself it is correct, I simply changed the IDs when creating the post. – Nimrod Yanai Jul 11 '18 at 23:06
  • @NimrodYanai I have updated my answer with code this works in my testing. – Joe Lissner Jul 11 '18 at 23:12
  • Thanx. I can see that it works when I try to use only this code snippet, but I still get the error message when I try it in my main code (which is very strange). But this indeed solved the issue, there must be something else interfering with the script element. Thank you! – Nimrod Yanai Jul 11 '18 at 23:24
0

you can pass the value directly

also you are getting element by id but passing the input name

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>
MajiD
  • 2,420
  • 1
  • 22
  • 32