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)
問題点は、
1、cssで初めの位置を指定しているにも関わらず、js内でidを取得すると、位置の中身が空になっている。
2、最初の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; //最後から2番目に入力された数字。 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>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/04 13:57
2018/11/04 14:10
2019/11/13 02:42