Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript

Html Inside Of A Javascript Loop

Post a Comment
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.

<inputtype="radio"name="scores"id="i"value="i"> i'); 

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

Solution 2:

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);
<h2style="text-align:center">On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?</h2><formid="NPSform"style="text-align:center"><inputtype="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);
<h2style="text-align:center">On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?</h2><formid="NPSform"style="text-align:center"><inputtype="submit"name="mysubmit"value="Submit" /></form>

Solution 3: 

<html><head><script>functionaddbuttons() {
    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><bodyonload="addbuttons()"><h2style="text-align:center">
    On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?
  </h2><formid="NPSform"; style= "text-align:center"><divid="dynamicButtons"></div><inputtype="submit"name="mysubmit"value="Submit"/></form></body></html>

Solution 4: 

<html><body><h2style="text-align:center">
        On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?
      </h2><formid="NPSform"; style= "text-align:center"><inputtype="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>

Solution 5: 

<html><body><h2style="text-align:center">
        On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?
      </h2><formid="NPSform"; style= "text-align:center"><divid="radioscontainer"></div><inputtype="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>

Post a Comment for "Html Inside Of A Javascript Loop"