Why can't javascript set the value of a HTML form element?

Question

Title says it all, i am setting a value in a variable in a javascript. I want to set that value as value of the one of the row in my form.

here is the code, this is based on previous similar questions and their accepted answers, but somehow it does not work for me.

<html>
<head>
<script>
    var counter = 0;
    var limit = 50;

    function addInput(divName){
         if (counter == limit)  {
              alert("You have reached the limit of adding " + counter + " inputs");
         }
         else {
              var newdiv = document.createElement('div');
              newdiv.innerHTML = "Element " + (counter + 1) + " <input type='text' name='myInputs[]'>";
              document.getElementById(divName).appendChild(newdiv);
              counter++;
         }
    }
</script>
</head>

<body>
<form method="POST"  align="center">
        <script>
        var emotion = "";
        var raw = Math.random();
        var final = Math.ceil(raw * 4);
        if (final == 1)
            document.getElementById("someid").value = "A";
        else if (final == 2)
            document.getElementById("someid").value = "B";
        else if (final == 3)
            document.getElementById("someid").value = "C";
        else if (final == 4)
            document.getElementById("someid").value = "D";
        </script>
     <div id="dynamicInput">
        Title<br><input type="text" value="" name="myInputs[]" id="someid" disabled>
     </div>
     <input type="button" value="Add another event" onClick="addInput('dynamicInput');">
     <br>
     <input type="submit" value="Submit">

</form>


</body>

</html>

I also tried something like:

document.forms[0].myInputs[0].value="Whatever"

inside the script tags, but that also does not work.

Edit_1 I expect some value in the disabled input field, just below the title, but its empty.

Here is the image:

How can I have some value based on a random number generator there?

@Se0ng11, please see the edit. I apologize for not being very clear — Adorn
– Adorn, Commented Sep 26, 2017 at 1:56
the issue here is how u arrange ur script, u put ur script at the top of the html, which mean that it run the js 1st b4 the html ever appear, hence thats the issue — Se0ng11
– Se0ng11, Commented Sep 26, 2017 at 2:03

Se0ng11 · Accepted Answer · 2017-09-26 02:03:44Z

2

check the jsfiddle, this is due to how u arrange ur script, you either move ur code below the html, or use onload() event

example

onload="test()"

then you will no need to worry where the js should put

 <script>
        function test(){
        var emotion = "";
        var raw = Math.random();
        var final = Math.ceil(raw * 4);
        if (final == 1)
            document.getElementById("someid").value = "A";
        else if (final == 2)
            document.getElementById("someid").value = "B";
        else if (final == 3)
            document.getElementById("someid").value = "C";
        else if (final == 4)
            document.getElementById("someid").value = "D";
        }

 </script>

https://jsfiddle.net/gw04jhoj/

you can refer to this for more info Javascript that executes after page load

answered Sep 26, 2017 at 2:03

Se0ng11

2,3342 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matthew · Accepted Answer · 2017-09-26 02:02:19Z

1

Your script is running before those HTML elements have been created, and so setting their value will fail, as document.getElementById("someid") doesn't exist yet. You should see this fail in the error console in the browser (F12).

Try moving the script until after you've created the HTML elements in question, or better yet change your script to only execute once the document has loaded.

answered Sep 26, 2017 at 2:02

Matthew

1,8651 gold badge17 silver badges21 bronze badges

Comments

The KNVB · Accepted Answer · 2017-09-26 01:39:36Z

0

You should use :

document.getElementById("someid").value="whatever";

answered Sep 26, 2017 at 1:39

The KNVB

3,8523 gold badges35 silver badges64 bronze badges

1 Comment

Adorn Over a year ago

did you see the code? I tried that, and it does not work.

Collectives™ on Stack Overflow

Why can't javascript set the value of a HTML form element?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related