当你单击功能按钮(开始)时没有实现

时间:2015-09-01 17:43:07

标签: javascript function loops for-loop

<script>
var imgsrc = [];
for (i=0;i<30;i++)
    imgsrc[i] = "images/"+i+".jpg";
function start() {
  $numberimg = document.getElementById("numberimg").value;
  $numbercolumn = document.getElementById("numbercolumn").value;
  for (i = 0; i < $numberimg; i++) {
    text += "<img src='" + imgsrc[i] + "'><br>";
  }
  document.getElementById("content").innerHTML = text;
}
</script>
<style type="text/css">
body,td,th {
	margin:0px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 12px;
	background-color:#B800FF;
}
.wrapper{
	width:100%;
	margin:0px;}
.container{
	width:960px;
	margin:auto;
	background-color:#FFFFFF;}
#select{
	margin-bottom:50px;
	margin-top:50px;}
.selection{
	width:195px;
	font-size:17px;
	margin-left:30px;
	border:#000000 solid 2px;}
#content{
	background-color:#BD2C2F;
	margin-top:50px;
	height:200px;
	width:100%;
	margin:0px;}
#content div {
	margin:10px;
	box-sizing:border-box;}
</style>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test 2</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<div id="select">
	<form>
		<select id="numberimg" class="selection" title="select a number">
          <option value="-1">insert number image</option>
		  <option value="1">1</option>
		  <option value="2">2</option>
		  <option value="3">3</option>
		  <option value="4">4</option>
		  <option value="5">5</option>
        </select> 
        <select id="numbercolumn" class="selection" title="select a number">
          <option value="-1">insert number column </option>
		  <option value="1">1</option>
		  <option value="2">2</option>
		  <option value="3">3</option>
		  <option value="4">4</option>
		</select> 
        <button onClick="start()">go</button>
	</form>
</div>
<div id="content"></div>
</div></div>
</body>
</html>

当从javascript代码中删除某个函数以使其正常工作,但不会使用函数代码

运行

1 个答案:

答案 0 :(得分:0)

你需要在增加它之前定义text变量。

 function start() {
     var text = ""; // Initialize it as an empty string
     $numberimg = document.getElementById("numberimg").value;
     $numbercolumn = document.getElementById("numbercolumn").value;
     for (i = 0; i < $numberimg; i++) {
        text += "<div><img src='" + imgsrc[i] + "'><br></div>";
     }
     document.getElementById("content").innerHTML = text;
 }

看看这个FIDDLE