JavaScript循环中的HTML
HTML inside of a JavaScript loop
我正在尝试创建10个单选按钮,标记为1-10,在我的html中有一个for循环,但我无法让它工作。
<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的新手,所以我仍然在学习很多东西。
使用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>
您可以将所有输入添加到循环内的一个字符串中,然后将其附加到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>
<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>
<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>
<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>
相关文章:
- 创建一个循环来简化HTML和CSS代码
- 从index.html调用函数,该函数无限循环
- 每个$.,循环获胜't逐个迭代HTML元素
- 如何在angularJS中运行for循环而不使用html标记
- 使用Razor/C#循环浏览HTML表以获得每个<tr>
- 使用jQuery无限循环播放HTML页面幻灯片
- 使用val()在jquery循环中设置html字符串的val
- 特定循环(html元素)方法的优点和缺点
- JS for循环来设置HTML对象参数
- 我想使用Javascript中的循环在HTML中的特定id中显示数组中的多个对象
- JavaScript循环中的HTML
- 如何在循环中将 json 数据显示为 HTML
- 为什么我的“for”循环只获取 html 中的最后一项
- 如何在 html 和 javascript 中显示隐藏不确定的循环进度条
- 使用 jQuery 将 HTML 文本抓取到 JSON 中,但由于循环引用而无法字符串化
- 在 jquery 中使用 .keyup() 重置 HTML
- 如何使用javascript在html循环中获取动态ID的值
- 如何使用 javascript 和 html 循环 mp3 文件
- 内部 HTML 循环不起作用
- 使用javascript编写html循环