Putting values into dynamically generated input types with JavaScript

Question

I have Range/Number type inputs that are synchronized and dynamically generate input fields as much as their values.

Then I have a button that will fill the generated input fields with an arbitrary value.

The dynamically generated input fields each have unique IDs, but the document.getElementById() function fails to find any of the IDs and returns null.

Is there a way to change the value of the generated fields within the randomizeItemTypes() function?

function randomizeItemTypes(textbox) {
  var rackNum = textbox.replace("itemSlider", "").replace("numOfTypes", "");
  var numOfTypes = document.getElementById("numOfTypes1").value;
  for (var i = 0; i < numOfTypes; i++) {
    document.getElementById("rack" + rackNum + "." + i).value = 4;
  }
}

The following link is the CodePen to my code: http://codepen.io/cnc4ever/pen/LGNMEp

Thanks guys!

fyi, having dots in an ID is not a good idea. at some point you'll probably use selectors to match elements (e.g. jquery or document.querySelector) and then you'd need to escape those dots — ThiefMaster
– ThiefMaster, Commented Dec 19, 2015 at 11:46
Try this; function randomizeItemTypes(textbox) { var rackNum = textbox.replace("randomize1", "1"); var numOfTypes = document.getElementById("numOfTypes1").value; for (var i = 0; i < numOfTypes; i++) { document.getElementById("rack" + rackNum + "." + i).value = 4; } } — yjs
– yjs, Commented Dec 19, 2015 at 11:49
wow wow wow...I do not believe what I just did.. what a dumb mistake. I'm new to HTML so I just assumed that dynamically generated objects worked differently, my bad! thanks for pointing it out! I'll take note of having dots in the ID too! — Howard Yang
– Howard Yang, Commented Dec 19, 2015 at 12:45

Bhavin Solanki · Accepted Answer · 2015-12-19 12:57:52Z

3

Your rackNum is giving some string instead of numbers Your id for textbox is something like rack1.0 , rack1.1 use document.getElementById("rack1" + "." + i).value = 4; instead

edited Dec 19, 2015 at 12:57

Bhavin Solanki

4,8143 gold badges28 silver badges47 bronze badges

answered Dec 19, 2015 at 11:44

neetesh

1861 silver badge7 bronze badges

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

1 Comment

Howard Yang Over a year ago

I realised it was such a noob mistake..thanks for pointing it out! totally my bad..

manoj shukla · Accepted Answer · 2015-12-19 12:32:02Z

0

 <html>
  <head>
    <title></title>
  </head>
   <body>
 <div class="itemsTypes1">
    <input id="itemSlider1" type="range" value="" min="1" max="10" step="1" onchange="printValue(this.value);drawItemTypes('itemSlider1');" />

     <input id="numOfTypes1" type="number" value="" min="1" max="10" onchange="printValue(this.value);drawItemTypes('numOfTypes1');" />
    <p id="itemTypes1Area"></p>
  <button id="randomize1" onclick="randomizeItemTypes()">Randomize</button>
</div>
<script type="text/javascript">
         function printValue(data) {

              var x = document.getElementById("itemSlider1").value = data;
              var y = document.getElementById("numOfTypes1").value = data;

            }
         function randomizeItemTypes() {
              var randomValue= Math.ceil(Math.random()*10);
              printValue(randomValue);
            }
      </script>
   </body>
 </html>

answered Dec 19, 2015 at 12:32

manoj shukla

452 bronze badges

4 Comments

manoj shukla Over a year ago

Do not need to create so many function to achieve simple things . please let me know if this is use full for you.

Howard Yang Over a year ago

My emphasis was on inserting the value to the input fields, but it was just a simple error on my part. Thanks anyway!

manoj shukla Over a year ago

is my code is doing what you wants to achieve through your code.?

Howard Yang Over a year ago

The randomize part yes, but I created other functions to have more input fields. Try changing the value of the first input field.

Collectives™ on Stack Overflow

Putting values into dynamically generated input types with JavaScript

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related