0

Unfortunately I cannot change the ID of an input, and would like to use JavaScript to change its value.

<input id="name-with-annoying-hyphens" type="number" />

<script>
document.getElementById(['name-with-annoying-hyphens']).value = "10";   
</script>

I cannot get rid of the three hyphens as the ID is so deeply grandfathered into everything. I also can't just put a value definition because the JavaScript has dynamic values. I've distilled things to get to the point.

Does anybody have a workaround or any experience with this?

I'll post the full script of what I'm trying to do.

Query string: {url}?amount=100

<script type="text/javascript">
function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");

    for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");

        if (pair[0] == variable) { return pair[1]; }
    }

    return(false);
}
</script>

<input id="name-with-annoying-hyphens" type="number"  />

<script>
    document.getElementById(['name-with-annoying-hyphens']).value = getQueryVariable("amount");
</script>

It would make my week if somebody knew of a work around. :(

Pankaj Bisht
  • 986
  • 1
  • 8
  • 27
Ray
  • 1
  • `['name-with-annoying-hyphens']` is wrong , you don't need to put it in an array – brk Apr 23 '18 at 05:32
  • Remove the brackets - `document.agetElementById('name-with-annoying-hyphens').value = "10";` – Ori Drori Apr 23 '18 at 05:32
  • That should work, even though it's abusing Array.toString. You might have something else going on, try to log both the element you try to reach, and the value you try to set. – Kaiido Apr 23 '18 at 05:44
  • The code is working just fine in `Google Chrome` browser. which browser did you used while testing above code and what was the issue you are facing ? – Srinu Chinka Apr 23 '18 at 06:07

2 Answers2

0

window.onload = function() {
 window["əlövsət-dayı"].value = 10;
}
<input type='number' id='əlövsət-dayı' value='0'>

when you assign an id attribute on a dom element, it creates a variable with that id on gloabal namespace, which you can access it by window["that-id"]

marmeladze
  • 6,468
  • 3
  • 24
  • 45
  • 1
    Hello marmeladze, THANK YOU SO MUCH!! Using window.onload works so much better given all the other stuff going on in the page and I've gotten my script to work unlike my attempt. Thank you, thank you, thank you!!! It's been a really miserable bit for me and this is just the best. Thank you!! – Ray Apr 23 '18 at 06:08
0

Thank you everyone. The below works just fine. Dumb mistake by me.

Query string: {url}?amount=100

<script type="text/javascript">
function getQueryVariable(variable)
{
   var query = window.location.search.substring(1);
   var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
           var pair = vars[i].split("=");
           if(pair[0] == variable){return pair[1];}
   }
   return(false);
}
</script>

<input id="name-with-annoying-hyphens" type="number"  />

<script>
    document.getElementById('name-with-annoying-hyphens').value = getQueryVariable("amount");
</script>

This was actually what I started out with and I've spent the last two hours trying to troubleshoot it thinking that hyphens ruined everything (hence the brackets from another stack overflow suggestion that I've misinterpreted). Turns out there's just something somewhere else breaking this.

Take away is to eat humble pie, get working in isolation first, and then give up early when something else in production spirals you deep, deep down into despair.

Ray
  • 1