JavaScript循环内的HTML
[英]HTML inside of a JavaScript loop
问题描述
我正在尝试创建10个单选按钮，在我的html内用for循环标记为1-10，但无法正常工作。
<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的新手，所以我仍然学到很多东西。
5 个解决方案
解决方案1
3 2016-04-28 16:59:52
使用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>
解决方案2
1 已采纳 2016-04-28 17:01:17
您可以将所有输入添加到循环内的一个字符串中，然后将其附加到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>
解决方案3
0 2016-04-28 17:08:52
<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>
解决方案4
0 2016-04-28 17:12:30
<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>
解决方案5
-1 2016-04-28 16:59:37
<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>
Django 中 Javascript 动态 Html 内容的 For 循环
[英]For loop inside of Javascript dynamic Html content in Django
HTML Javascript在var循环内添加var作为输入值
[英]HTML Javascript Adding a var as an input value inside a for loop
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.