配列とfor文で連続する画像のidを一括取得したい
HTML,JavaScript,CSSでサイトをつくっています。
画像を拡大するボタンを押すと画像が拡大される機能をすべての画像に適用したいのですが
配列の最後(ここでいうとpicture6)にしか適用されません。
発生している問題
このコードだとpicture6にしかfunctionの機能が適用されない。
全てのpicture1~6に適用したい。
該当のソースコード
html
1<input type="button" value="画像を拡大" onclick="zoom()">
javascript
1 2var num = [1,2,3,4,5,6]; 3var w = 100; 4var timerId; 5 6 for(var i of num) { 7 8 function zoom() { 9 w = Number(document.getElementById('picture'+i).getAttribute('width')); 10 timerId = setInterval('change();', 100); 11 } 12 13 function change() { 14 w += 10; 15 document.getElementById('picture'+i).setAttribute('width', w); 16 if (w > 500) { 17 clearInterval(timerId); 18 } 19 } 20 }
追記
上のコードを訂正しましたが、今度は画像が永遠に拡大していってしまいます。
if (w > 200)...で止まるようにしたつもりだったのですがどこが悪いのか分かりません。
JavaScript
1var num = [1,2,3,4,5,6]; 2var w = 100; 3var timerId; 4 5 6function zoom() { 7for(var i of num) { 8w = Number(document.getElementById('picture'+i).getAttribute('width')); 9timerId = setInterval('change();', 100); 10} 11} 12 13function change() { 14for(var i of num) { 15w += 10; 16document.getElementById('picture'+i).setAttribute('width', w); 17if (w > 200) { 18clearInterval(timerId); 19} 20} 21}
回答2件
あなたの回答
tips
プレビュー