style.left += "50px"
style.leftがnullだったときに加算できません
また文字列だったときにも加算できません
50pxに50pxを足すと50px50pxですね
たとえばこう
javascript
1<script>
2var time=5;
3var Mario;
4window.addEventListener('DOMContentLoaded', function(e){
5 Mario=document.querySelector('#mario');
6 MarioMove();
7});
8function MarioMove() {
9 timerId = setTimeout(step, 1000);
10}
11
12function step() {
13 var l=Mario.style.marginLeft;
14 l=(reg=l.match(/\d+/))?reg[0]:"0"; //数値を含めばその数、なければ0
15 l=parseInt(l); //文字列を数値化
16 l+=50; //数値に50を加算
17 l+="px"; //単位を付加
18 console.log(l);
19 Mario.style.marginLeft = l; //値を代入
20 time--;
21 if(time === 0){
22 clearTimeout(timerId);
23 } else {
24 timerId = setTimeout(step, 1000);
25 }
26}
27</script>
28
29<img id="mario" src="https://placehold.jp/ff0000/00ffff/100x100.png?text=mario">
※コメントつけておきました
解説
javascript
1l=(l.match(/\d+/))?reg[0]:"0";
2```javascript
3上記分解すると
4```javascript
5reg=l.match(/\d+/)
\dは0-9の数字それに+がついてるので1文字以上の数字
それをスラッシュで挟んでmatchにあたえると
変数lの文字列の中にある数字を拾い、結果をregという変数に配列として返します。
javascript
1l=条件?reg[0]:"0";
条件の中でregに数値がはいっていればその数値であるreg[0]をlに代入します
そうでないとき(つまりlに数値が含まれないとき)にはlには"0"を代入します
これを三項演算子といいます
結果としてlの中から数値だけを取り出してlに入れ直しています
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/06 11:59