dynamically add input to js d3

Question

I am new to d3 and am trying to create a function to dynamically add a certain number of text boxes to an html form, but have not been sucessful. Here is my code. What is the issue?

        for (i=0;i<numLines;i++){
        var div = document.getElementById('user-input');
        div.innerHTML += '<input id="textfield_"+i type="text" value="text_"+i>';
    }

Here is the html code:

<div id="container-exp">
<div id="Stage 2">
    <center>
            <button type="button" id="show-example" value="show-example" class="btn btn-primary btn-lg example"">
            Show Example
            </button>        
    </center><br/><br/>
    <div class="col-xs-2">

    </div>
    <div id="passage"></div>
    Fill out the below with the information in the above passage. To see an example, please click the button "Show example" above.
    </div id="user-input">
        <div class="col-xs-2">
            <button type="button" id="next" value="next" class="btn btn-primary btn-lg continue">
            Next <span class="glyphicon glyphicon-arrow-right"></span>
            </button>
    </div>

the <center> tag has been deprecated for years. What has this to do with d3? You can add these elements with d3 but you do it the hard way. — rioV8
– rioV8, Commented Aug 15, 2018 at 20:42

Jeevan MB · Accepted Answer · 2018-08-15 20:30:09Z

1

Your code looks fine. I executed it in a jsfiddle, and it created the elements. There must be some other issue.

I tried both cases where user-input element is a <div> as well as a <form>. It worked in both cases.

While we are it, and you can ignore this - You can make some modifications to the code like this:

var elements = "";

for (i = 0; i < 5; i++){
  // this is what I assume what you were trying to do in the code
  elements += "<input id='textfield_" + i + "'' type='text' value='text_" + i + "''>";

  // this is cleaner way, but not supported in older browsers
  elements += `<input id='textfield_${i}' type='text' value='text_${i}'>`;
}

var div = document.getElementById('user-input');
div.innerHTML += elements;

answered Aug 15, 2018 at 20:30

Jeevan MB

1481 silver badge11 bronze badges

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

2 Comments

aimf212 Over a year ago

thanks! I added my html file, which may be the culprit

Jeevan MB Over a year ago

The HTML file is incorrectly formatted. check out this jsfiddle link. I corrected the HTML and it is adding the elements. jsfiddle.net/jforcode/xpvt214o/619471

rioV8 · Accepted Answer · 2018-08-15 21:08:16Z

In case you want to do it with d3 here is an example

var numlines = 10;
d3.select("#user-input").selectAll(".dummy")
  .data(d3.range(numlines))
  .enter()
  .append("input")
  .attr("id", i => `textfield_${i}`)
  .attr("type", "text")
  .attr("value", i => `text_${i}`);

<script src="https://d3js.org/d3.v5.js"></script>
<div id="passage"></div>
Fill out the below with the information in the above passage. To see an example, please click the button "Show example" above.
<div id="user-input">
    <div class="col-xs-2">
        <button type="button" id="next" value="next" class="btn btn-primary btn-lg continue">
        Next <span class="glyphicon glyphicon-arrow-right"></span>
        </button>
    </div>
</div>

Collectives™ on Stack Overflow

dynamically add input to js d3

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related