javascriptでstyleプロパティのインクリメントが上手くできません。

htmlのテキストボックス(id="keisan")に入力されている計算式中の「最後に入力された数字(lastNum)」の分の数値だけdivの箱(id="hako" コメント中では「矢印」と表現)が、リアルタイムに横に伸縮し、算術演算子"+"が入力されると、「最後に入力された数字(lastNum)」の分の数値だけ横に平行移動する（すなわち伸びた分だけ平行移動）、というプログラムを作ろうとしています。
リアルタイムな処理のためにonInputイベントハンドラを使っています。
伸縮の方の処理は上手くいったのですが、平行移動の処理が上手くいかず、それは以下のコードの36行目のif文の処理になります。

if(lastChar=="+"){//加算に伴う矢印の平行移動
hako.style.left = hako.style.left + lastNum +"px";
console.log(hako.style.left)

問題点は、
１、cssで初めの位置を指定しているにも関わらず、js内でidを取得すると、位置の中身が空になっている。
２、最初の1つ目の数字だけはhako.style.leftに代入されて(40pxなど)divの箱も移動してくれるのですが、続けて2個目3個目の数字を入力して"+"を入力しても、hako.style.leftの値は変わりません。(40pxのまま)

調べると、「スタイルプロパティのインクリメントにおいては、インクリメントの式においてparseIntを使って単位"px"を取り除き、数値に直さなければならない。そうすれば上手くいく」とあったので実践してみると、今度は最初の1つ目の数字すら代入されず、ずっと空のままです。

どこがいけないのでしょうか？ご回答よろしくお願いいたします。

javascript
1コード
2<head>
3<meta charset="utf-8">
4<style type="text/css">
5    #hako{
6        position: absolute;
7        background-color: aquamarine;
8        width:30; height:30;
9        top:300; left:20;
10    }
11</style>
12<script type="text/javascript">
13    var currentNum;//入力中の式の最後の数字を格納。+5,-7みたいな符号付き数字も格納したい
14  var shoki;//入力中の計算式の記録。書記。
15  var lastChar;//入力中の計算式の最後の文字。
16  var lastNum;//最後に入力された数字。
17  var llastNum; //最後から２番目に入力された数字。
18function calcMemory(){                          
19    shoki = document.getElementById("keisan").value;//入力中の文字列
20    lastChar = shoki.charAt(shoki.length-1);//最後の文字を抜き出す
21    
22    var Nums = shoki.match(/[-]?\d+/g);//計算式中に登場した数字全てを検索して格納。整数のみ
23    lastNum = Nums[Nums.length-1];//最後の数字を格納
24    llastNum = Nums[Nums.length-2]//最後から2番目の数字を格納
25    
26    
27    document.getElementById("dasu").value = shoki;
28    document.getElementById("lastChar").value=lastChar;
29     document.getElementById("Nums").value = Nums;//テキストボックスのvalueに配列を入れると、,,と区切って全部入力されるらしい…万能。
30    document.getElementById("lastNum").value = lastNum;
31    document.getElementById("llastNum").value = llastNum;
32    
33    hako = document.getElementById("hako");
34    hako.style.width = lastNum;//矢印の長さを入力した数値にリアルタイムに変える
35    console.log(hako.style.left);
36    console.log(lastNum);
37    if(lastChar=="+"){//加算に伴う矢印の平行移動
38        hako.style.left = hako.style.left + lastNum +"px"; 
39        console.log(hako.style.left);
40    }
41   
42    
43}
44    
45function kotae(){
46    document.getElementById("kekka").value= eval(shoki);
47}
48</script>
49</head>
50
51<body>
52<input type="text" id="keisan" onInput="calcMemory();">
53<input type="button" value="Go" onclick="kotae();">
54    <p>入力した計算式のコピー</p>    
55    <input type="text" id="dasu">=<input type="text" id="kekka"><p></p>
56    最後の文字<input type="text" id="lastChar"><p></p>
57    式中にある全部の数字<input type="text" id="Nums"><p></p>
58    最後の数字<input type="text" id="lastNum"><p></p>
59    最後のから2番目の数字<input type="text" id="llastNum"><p></p>
60    
61<div id="hako"></div>
62
63</body>

行動規範の内容に同意します

回答1件

原因
１、left:20は無効なプロパティです。"px","%","em"等の単位が必要です。
２、parseIntが必要と認識しているにもかかわらず、使用していない。以下、修正コードです。

javascript
1//        hako.style.left = hako.style.left + lastNum +"px"; //ここを修正
2        hako.style.left = (hako.style.left ? parseInt(hako.style.left) : 0) + +lastNum + "px"; 
3        console.log(hako.style.left);
4

投稿2018/11/04 12:36

kaba

総合スコア314

WeilSpinor

2018/11/04 13:57

ご回答ありがとうございます。書いて頂いた修正コードを入力したところ、思った通りに動きました。 >１、left:20は無効なプロパティです。"px","%","em"等の単位が必要です。単位をかかなくても自動的にpxが付加されるようですが…。（console.logで確認できました）２、parseIntが必要と認識しているにもかかわらず、使用していない。別サイトの教えに従って、 hako.style.left = parseInt(hako.style.left) + lastNum + "px"; とやってみて、駄目だったので質問しました。修正コードの、?とか:0、lastNumの前の+などは、どういった意味があるのでしょうか？

kaba

2018/11/04 14:10

（console.logで確認できました）とあるので、問題点１は質問から取り下げるという意味で良いですか？修正コードについては、hako.style.leftが存在しないか空文字("")の場合にparseIntがNaNにならないようにしています。lastNumは文字なので数値変換するための+lastNumです。