HTML внутри цикла JavaScript

Я пытаюсь создать 10 переключателей, помеченных 1-10 с циклом for внутри моего html, и я не могу заставить его работать.HTML внутри цикла JavaScript

<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>

Спасибо. Я новичок в JS, поэтому я все еще многому учусь.

источник

2016-04-28 Spance

JS не нравится PHP. Вы не можете напрямую писать разметку, вам нужно пройти через DOM, используя либо объект 'document', либо используя библиотеку jQuery. – Cameron

Вы можете добавить все входы в одну строку внутри цикла, а затем добавить его в HTML, а также вы должны разделить ваш js и html код

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>

Вы также можете создать один DIV, установить innerHTML и использовать insertBefore, чтобы добавить его в 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>

источник

2016-04-28 17:01:17

Следует ли указывать тег сценария, который должен быть помещен в конец тела или, по крайней мере, где-то вне формы? – IrkenInvader

-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>

источник

2016-04-28 16:59:37

Ему может понадобиться чистый js-подход вместо jQuery – IrkenInvader

да, вы правы;) –

Используйте document.write для вывода HTML так.

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>

источник

2016-04-28 16:59:52 Wowsk

конец строки document.write должен читать 'value =" i "> '+ i);' – IrkenInvader

Спасибо, я знал, что я что-то пропустило! – Wowsk

<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>

источник

2016-04-28 17:08:52

<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>

источник

2016-04-28 17:12:30

Я предлагаю вам улучшить свой пример, прочитав [Минимальный, полный и проверяемый пример] (http://stackoverflow.com/help/mcve). – IlGala

HTML внутри цикла JavaScript

ответ

Смежные вопросы