javascript for循环问题

时间:2017-03-03 04:21:18

标签: javascript jquery

我遇到的问题如下:这个for循环应该在地址中加一个数字,最多计数152,然后将其设置为完整地址,如下所示

<img src="http://pokeapi.co/media/img/1.png">
<img src="http://pokeapi.co/media/img/2.png">

等等。我错过了什么?

&#13;
&#13;
var webaddress = ['<img src="http://pokeapi.co/media/img/">'];
var text = "";
var i;
for (i = 0; i < 152; i++) {
  text += webaddress[i] + ".png";
}
document.getElementById("Pokeman").innerHTML = text;
&#13;
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  </style>
  <script type="text/javascript" rel="script" type="script" href="script.jss"></script>
  <script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>

</head>


<body>
  <div id="container">

    <p id="Pokeman"></p>



  </div>

</body>

</html>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

你正在设置你的javascript - 但是引用的元素(#Pokeman)还没有在DOM中 - 只需将js块移动到结尾 - 在结束体标记之前。因为你正在使用jquery - 我简化了js并使用了它。

编辑 - 我刚刚将你的img代码插入到函数中,以便它以数字递增的方式呈现图像。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css"/>

  </head>
  <body>
    <div id="container">
      <p id="Pokeman"></p>
    </div>
    
  <script type="text/javascript" rel="script" type="script" href="script.jss"></script>
  <script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script> 
  <script>
    $(document).ready(function(){
    for (var i = 1; i <= 152; i++) {
       $("#Pokeman").append('<img src="http://pokeapi.co/media/img/'+ i + '.png"/>');
     }
   })
 </script>
  </body>
</html>

答案 1 :(得分:0)

您可以将root地址创建为根字符串并将其替换为循环

&#13;
&#13;
var webaddress = '<img src="http://pokeapi.co/media/img/[index].png">';
    var text = "";
    for (var i = 1; i <= 152; i++) {
    text += webaddress.replace("[index]", i);
    }
    document.write(text);
&#13;
&#13;
&#13;