HTML inside of a JavaScript loop

Question

I'm trying to create 10 radio buttons, labeled 1-10 with a for loop inside of my html and I can't get it to work.

<html>
    <body>
      <h2 style="text-align:center">
        On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?
      </h2>
        <form id="NPSform"; style= "text-align:center">
            <script>
                for (var i = 1; i <=10; i++) {
                    <input type="radio" name="scores" id="i" value="i"> i
                }
            </script>
            <input type="submit" name="mysubmit" value="Submit"/>
        </form>
    </body>
</html>

Thanks. I'm new to JS so I'm still learning a lot.

JS isn't like PHP. You can't write directly to the markup, you have to go through the DOM using either the document object or using a library like jQuery. — Cameron
– Cameron, Commented Apr 28, 2016 at 17:02

Wowsk · Accepted Answer · 2016-04-28 17:09:08Z

6

Use document.write to output the HTML like so.

document.write('<input type="radio" name="scores" id="i" value="i"> i');

<html>
    <body>
      <h2 style="text-align:center">
        On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?
      </h2>
        <form id="NPSform"; style= "text-align:center">
            <script>
                for (var i = 1; i <=10; i++) {
                    document.write('<input type="radio" name="scores" id="i" value="i">'+ i);
                }
            </script>
            <input type="submit" name="mysubmit" value="Submit"/>
        </form>
    </body>
</html>

edited Apr 28, 2016 at 17:09

answered Apr 28, 2016 at 16:59

Wowsk

3,6852 gold badges20 silver badges30 bronze badges

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

2 Comments

IrkenInvader Over a year ago

end of the document.write line should read value="i"> ' + i);

Wowsk Over a year ago

Thank you, I knew I missed something!

Nenad Vracar · Accepted Answer · 2016-04-28 17:13:20Z

3

You can add all inputs to one string inside loop and then append it to HTML, also you should separate your js and html code

var inputs = '';
 for (var i = 1; i <= 10; i++) {
   inputs += '<input name="scores" type="radio" value="' + i + '" id="' + i + '">'+i+'';
 }
 document.getElementById('NPSform').insertAdjacentHTML('afterbegin', inputs);

<h2 style="text-align:center">On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?</h2>
<form id="NPSform" style="text-align:center">
  <input type="submit" name="mysubmit" value="Submit" />
</form>

You can also create one div, set innerHTML and use insertBefore to add it to html

var inputs = '';
for (var i = 1; i <= 10; i++) {
  inputs += '<input name="scores" type="radio" value="' + i + '" id="' + i + '">' + i + '';
}

var div = document.createElement('div');
div.innerHTML = inputs;

var submit = document.querySelector('#NPSform input');
submit.parentNode.insertBefore(div, submit);

<h2 style="text-align:center">On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?</h2>
<form id="NPSform" style="text-align:center">
  <input type="submit" name="mysubmit" value="Submit" />
</form>

edited Apr 28, 2016 at 17:13

answered Apr 28, 2016 at 17:01

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

1 Comment

IrkenInvader Over a year ago

Should you specify the script tag should be placed at the end of the body or at least somewhere outside the form?

Umesh Maharshi · Accepted Answer · 2016-04-28 17:08:52Z

0

<html>
<head>
<script>
  function addbuttons() {
    var buttons = document.getElementById("dynamicButtons");
            for (var i = 1; i <=10; i++) {
                buttons.innerHTML += '<input type="radio" name="scores" id="' +i +' " value="' +i +'">'
            }

            }
 </script>
</head>
<body onload="addbuttons()">
  <h2 style="text-align:center">
    On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?
  </h2>
    <form id="NPSform"; style= "text-align:center">     
        <div id="dynamicButtons"></div>
        <input type="submit" name="mysubmit" value="Submit"/>
    </form>
</body>
</html>

answered Apr 28, 2016 at 17:08

Umesh Maharshi

1,59110 silver badges12 bronze badges

Comments

Rafael Umbelino · Accepted Answer · 2016-04-28 17:12:30Z

0

<html>
    <body>
      <h2 style="text-align:center">
        On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?
      </h2>
        <form id="NPSform"; style= "text-align:center">
            <input type="submit" name="mysubmit" value="Submit"/>
        </form>
    </body>
    <script>
        for (var i = 1; i <=10; i++) {
            document.write("<input type='radio' name='scores' id='"+i+"' value='"+i+"'> "+i+"");
        }
    </script>
</html>

answered Apr 28, 2016 at 17:12

Rafael Umbelino

8308 silver badges15 bronze badges

1 Comment

IlGala Over a year ago

I suggest you to improve your example by reading the Minimal, Complete and verifiable example.

Mohit Bhardwaj · Accepted Answer · 2016-04-28 17:01:07Z

-1

<html>
    <body>
      <h2 style="text-align:center">
        On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?
      </h2>
      <form id="NPSform"; style= "text-align:center">

        <div id="radioscontainer">
        </div>

        <input type="submit" name="mysubmit" value="Submit"/>
      </form>


<script>
  var radioButtons = '';
  for (var i = 1; i <=10; i++) {
    radioButtons += '<input type="radio" name="scores" id="i" value="i"> i';
  }//for
  $("#radioscontainer").append( radioButtons );
</script>
</body>
</html>

edited Apr 28, 2016 at 17:01

answered Apr 28, 2016 at 16:59

Mohit Bhardwaj

10.1k7 gold badges41 silver badges66 bronze badges

1 Comment

IrkenInvader Over a year ago

He might need a pure js approach instead of jQuery

Collectives™ on Stack Overflow

HTML inside of a JavaScript loop

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related