Q&A
実現したいこと
JavascriptとjQueryで最低限の機能を持った電卓を作っています。
evalを使わずに実現できないかと思い作成しています。
---処理プロセス---
number(数字)が入力されたら
outputに数字を表示
operator(最初の演算子)が押されたら
new_numberを付与
numberを削除
outputの文字列をbeforeNumberで数字に変換
numberにbeforeNumberを代入
outputの数字を削除
押された演算子のtextをoutputに表示
もし、newOperatorに文字が入っていれば
{total 演算子 numberで計算し、結果をtotalに代入}---×4つ
そうでなければ
{total＋numberを計算し、結果をtotalに代入
押された演算子によって異なる演算子をoperatorに代入}---×4つ
new_operatorを付与
operatorを削除
//-----2巡目-----
new_number(2巡目の数字)が入力されたら
outputの数字を削除
新たにoutputに数字を表示
new_operator(2巡目の演算子)が押されたら
numberを付与
new_numberを削除
outputの文字列を数字としてnumberに代入
もし、operatorに’＋’が入っていれば
total + numberで計算し、結果をtotalに代入---×4パターン
operatorに押された演算子によって異なる演算子を代入---×4パターン
operatorを付与
new_operatorを削除
＝が押されたらtotalをoutputに表示
Cが押されたら
totalに0を代入
numberに0を代入
numberのclassをnumberに設定
operatorのclassをoperatorに設定
発生している問題点2つ
1つ目
一度.operatorが押されると、その後に入力される数字のclassを.numberから.new_numberに書き換えています。
これで交互に数字の処理を実行させようとしています。
しかし、classの書き換え自体は実行されているにも関わらず$('.new_number').on('click',function(){})が実行されずに冒頭の$('.number').on('click',function(){})が実行されます。
classを書き換えたら$('.new_number').on('click',function(){})のみ実行できるようにするには、どんな処理をすればよいでしょうか。
2つ目
$('.new_number').on('click',function(){})を$('.number').on('click',function(){})の中に入れると動作するようになりますが、その外だと動作しない理由を知りたいです。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <link rel="stylesheet" href="style.css"> 7 <script src="../jquery-3.4.1.min.js"></script> 8 <script src="script.js"></script> 9 <title>電卓</title> 10</head> 11 12<body class="wrapper"> 13 <h1>電卓</h1> 14 <div class="calc_countainer"> 15 <div class="text_countainer"> 16 <div class="output"></div> 17 <div class="btn_c" id="clear">c</div> 18 </div> 19 <div class="number_countainer"> 20 <div class="number">7 21 </div> 22 <div class="number">8 23 </div> 24 <div class="number">9 25 </div> 26 <div class="operator" id="division">÷ 27 </div> 28 <div class="number">4 29 </div> 30 <div class="number">5 31 </div> 32 <div class="number">6 33 </div> 34 <div class="operator" id="multi">× 35 </div> 36 <div class="number">1 37 </div> 38 <div class="number">2 39 </div> 40 <div class="number">3 41 </div> 42 <div class="operator" id="minus">- 43 </div> 44 <div class="number">0 45 </div> 46 <div class="operator" id="dot">. 47 </div> 48 <div class="operator" id="plus">+ 49 </div> 50 <div class="operator" id="equal">= 51 </div> 52 </div> 53 </div> 54</body> 55 56</html> 57
jQuery
1$(function () { 2 var total = '', 3 beforeNumber = '', 4 number = '', 5 operator = null, 6 newNumberText = '', 7 plus = document.getElementById('plus'), 8 minus = document.getElementById('munus'), 9 division = document.getElementById('division'), 10 multi = document.getElementById('multi'), 11 equal = document.getElementById('equal'), 12 dot = document.getElementById('dot'), 13 crear = document.getElementById('clear'); 14 15 $('.number').on('click', function () { 16 var numberText = Number($(this).text()); 17 $('.output').append(numberText); 18 }); 19 20 21 $('.operator').on('click', function () { 22 $('.number').addClass('new_number'); 23 $('.number').removeClass('number'); 24 25 beforeNumber = $('.output').text(); 26 number = Number(beforeNumber); 27 28 $('.output').text($(this).text()); 29 30 if (operator === '+') { 31 total = total + number; 32 } else if (operator === null && $(this).attr('id') === 'plus') { 33 operator = '+'; 34 total = total + number; 35 } else if (operator === '-') { 36 total = total - number; 37 } else if (operator === null && $(this).attr('id') === 'minus') { 38 operator = '-'; 39 total = total + number; 40 } else if (operator === '×') { 41 total = total * number; 42 } else if (operator === null && $(this).attr('id') === 'multi') { 43 operator = '×'; 44 total = total + number; 45 } else if (operator === '÷') { 46 total = total / number; 47 } else if (operator === null && $(this).attr('id') === 'division') { 48 operator = '÷'; 49 total = total + number; 50 } 51 52 $('.operator').addClass('new_operator'); 53 $('.operator').removeClass('operator'); 54 55 }); 56 57 //---------------以下2巡目--------------- 58 $('.new_number').on('click', function () { 59 //$('.output').text(''); 60 var numberText = Number($(this).text()); 61 $('.output').append(numberText); 62 }); 63 64});
試したこと
classの書き換えが実行できていることは以下の方法で確認済みです。
CSSで.nwe_numbwe{}が反映される
$('.new_number').hasClass('number') => false
class書き換えをtoggleClass/attr('class')に変更
→挙動に変化なし
$('.new_number').on('click',function(){})を$('.operator').on('click', function () {}の中に入れる
→.number/.new_number両方のclick,functionが実行されてしまい、一度の入力で数字が2つ表示されてしまう。
数字にid='number'を与え、#numberのclick,function内でif文を使用。.numberを持っている時といない時で処理を分ける
補足情報
OS=Windows / ブラウザ=chrome / エディタ=Brackets
回答1件
0
ベストアンサー
しかし、classの書き換え自体は実行されているにも関わらず$('.new_number').on('click',function(){})が実行されずに冒頭の$('.number').on('click',function(){})が実行されます。
オブジェクト.on(...) はオブジェクトのイベントと関数を関連付けます。
オブジェクトでイベントが発生すると関連付けられた関数が実行されます。
質問のコードでは、$(function(){} 内に .on(...) が記述されているので、ページの読み込み完了時に1回実行れます。.number というセレクタに一致するオブジェクト（要素）に関数が関連付けられます。.number というセレクタに関連付けられるのではないことに留意してください。
その後、クラスが書き換えられたとしても関連付けが解消されるわけではないので、$('.number').on('click',function(){}) 内の関数が実行されます。
$('.new_number').on('click',function(){})を$('.number').on('click',function(){})の中に入れると動作するようになりますが、その外だと動作しない理由を知りたいです。
上記のことが理解できれば、この理由も分かると思います。
数字ボタンをクリックすると、$('.number').on('click',function(){})内の関数が実行されます。
この関数の中に、$('.new_number').on('click',function(){}) があればこれが実行されて、.new_numberセレクタに合致するオブジェクトが見つかればイベントと関数が関連付けられます。
対処法としてはいろいろ考えられますが、$('.number').on('click',function(){})の関数内で、自身(this)のクラスを見て、処理を分岐する設計に変更すればどうでしょうか。
投稿2020/01/21 16:12
総合スコア33715
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/24 12:20
2020/01/24 17:18
2020/01/25 02:42