2017-03-03 1 views
-1

문제는 다음과 같습니다 루프에 대한이 주소에 숫자를 넣어 152까지 계산 등자바 스크립트가 나는 데

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

등을 다음과 같이 그것을 전체 주소를 넣어해야합니다. 내가 뭘 놓치고 있니?

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

답변

0

당신은 루트 문자열로 webaddress을 만들고 루프 내에서 교체 할 수

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

+0

1 그리고 매우 많이 완료되었습니다. –

0

당신은 당신의 머리에 자바 스크립트 설정하는 - 그러나 참조되는 요소 (#Pokeman는) 아직 DOM에없는 - 단순히 끝에 JS 블록을 이동 - 전에 닫는 body 태그. 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>

+0

그럼이 지금은 이유를 찾을 필요 :) 인쇄 그것의 정의되지 않은 –

+0

는 webaddress가 단지 하나의 값을 가지고 있기 때문에 그럴 것입니다. 그러나 당신은 inc입니다. - 또한 닫는 태그 앞에 이미지 URL에 .png를 추가해야합니다. – gavgrif

+0

EDIT - 이미지에 숫자가 증가하도록 img 코드를 함수에 삽입했습니다. – gavgrif

관련 문제