質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3597閲覧

jqueryで電卓の作成

SugiuraY

総合スコア317

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/02/24 07:38

編集2018/02/24 09:49

Jqueryで電卓を作成しているのですが、とある部分でうまく対応できません。
具体的には
1)第1項の数値を入力し
2)四則の計算を押した
3)第2項の数値を入力する

の2と3の間の箇所なのですが、
下記のコードの通り、四則計算について、値が保持されtrueであれば
var $num_2に押されたテキストが保持され、複数の値が押された場合には
$display_text2にjoinされた数値が保持されるイメージで作成しました。

if ($calculator) {

$('#display').text(""); var $num_2 =$(this).text(); console.log($num_2); if ($num_2==1||$num_2==2||$num_2==3||$num_2==4||$num_2==5||$num_2==6||$num_2==7||$num_2==8||$num_2==9||$num_2==0) { ary2.push($num_2); $display_text2 =ary2.join(""); $('#display').text($display_text2); console.log($display_text2); }

}

しかし実際には
console.log($num_2);について出力されません。

何か良い方法やアドバイスを頂ければと思います。
よろしくお願い申し上げます。

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>計算機</title> 6 <style media="screen"> 7 .line_1st{ 8 -webkit-box-pack:justify; 9 -ms-flex-pack:justify; 10 justify-content:space-between; 11 } 12 .btn{ 13 width:100px; 14 height:50px; 15 font-size: 20px; 16 } 17 .line_item_5th{ 18 width:80%; 19 height: 50px; 20 font-size: 30px; 21 } 22 .line_item_6th{ 23 width:20%; 24 height: 50px; 25 font-size: 30px; 26 } 27 </style> 28 29 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script> 30 31 32 </head> 33 <body> 34 <br><br><br> 35<div class="wrapper" style="width:500px;margin: 0 auto"> 36 37 <div id="display" style="width:80%;margin:0 auto;height:50px;border:1px solid #b1b1b1;font-size:40px;text-align:right;padding:10px 5px 5px 5px"></div> 38 <br> 39 40 <div class="line_1st" style="display:flex;width:80%; margin:0 auto;"> 41 <button id="1" class="btn line_item_1st" type="button" name="button">1</button> 42 <button id="2" class="btn line_item_1st" type="button" name="button">2</button> 43 <button id="3" class="btn line_item_1st" type="button" name="button">3</button> 44 </div><br> 45 46 <div class="line_1st" style="display:flex;width:80%; margin:0 auto;"> 47 <button id="4" class="btn line_item_2nd" type="button" name="button">4</button> 48 <button id="5" class="btn line_item_2nd" type="button" name="button">5</button> 49 <button id="6" class="btn line_item_2nd" type="button" name="button">6</button> 50 </div><br> 51 52 <div class="line_1st" style="display:flex;width:80%; margin:0 auto;"> 53 <button id="7" class="btn line_item_3rd" type="button" name="button">7</button> 54 <button id="8" class="btn line_item_3rd" type="button" name="button">8</button> 55 <button id="9" class="btn line_item_3rd" type="button" name="button">9</button> 56 </div><br> 57 58 <div class="line_1st" style="display:flex;width:80%; margin:0 auto;"> 59 <button id="0" class="btn line_item_4th" type="button" name="button">0</button> 60 <button id="月" class="btn line_item_4th" type="button" name="button">月</button> 61 <button id="日" class="btn line_item_4th" type="button" name="button">日</button> 62 </div><br> 63 64 <div class="line_1st" style="display:flex;width:80%; margin:0 auto;"> 65 <button id="plus" class="btn line_item_4th" type="button" name="button">+</button> 66 <button id="minus" class="btn line_item_4th" type="button" name="button">-</button> 67 <button id="multi" class="btn line_item_4th" type="button" name="button">*</button> 68 </div><br> 69 70 <div class="line_1st" style="display:flex;width:80%; margin:0 auto;"> 71 <button id="dividend" class="btn line_item_4th" type="button" name="button">/</button> 72 <button id="equal" class="btn line_item_4th" type="button" name="button" style="width:250px;">=</button> 73 </div><br> 74 75<script type="text/javascript"> 76var sum = function(arr) { 77 var total = 0, i = 0, len = 0; 78 if (Object.prototype.toString.call(arr) !== '[object Array]') return; 79 for (i = 0, len = arr.length; i < len; i++) total += arr[i]; 80 return total; 81}; 82 83 84 $(function(){ 85 var ary = new Array(); 86 var ary2 = new Array(); 87 88 $('.btn').on('click',function(){ 89 90 if (!$calculator) { 91 var $num =$(this).text(); 92 if ($num==1||$num==2||$num==3||$num==4||$num==5||$num==6||$num==7||$num==8||$num==9||$num==0) { 93 ary.push($num); 94 $display_text =ary.join(""); 95 $('#display').text($display_text); 96 } 97 } 98 99 if ($num=="+"||$num=="-"||$num=="*"||$num=="/") { 100 var $calculator=$(this).text(); 101 $memory_1st = $display_text; 102 } 103 104 if ($calculator) { 105 106 $('#display').text(""); 107 var $num_2 =$(this).text(); 108 console.log($num_2); 109 110 if ($num_2==1||$num_2==2||$num_2==3||$num_2==4||$num_2==5||$num_2==6||$num_2==7||$num_2==8||$num_2==9||$num_2==0) { 111 ary2.push($num_2); 112 $display_text2 =ary2.join(""); 113 $('#display').text($display_text2); 114 console.log($display_text2); 115 } 116 } 117 118 119 120 })

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2018/02/24 10:00

『hogeのデータに上書きされてしまいます。』コードを見る限り上書きされなさそうですが、ご提示のコードで現象は再現されていますか?
SugiuraY

2018/02/24 10:47

申し訳ございません、質問の要点が適切ではなかったため、全面的に修正しました。おっしゃる通り元のコードでhogeは上書きされておりませんでした。
Lhankor_Mhy

2018/02/24 11:36

$('.btn').on('click',function(){ 内で宣言されている変数、たとえば、$calculator などは、clickイベントが起きるたびにリセットされますが、それで想定どおりですか?
SugiuraY

2018/02/24 11:39

コメントありがとうございます。そこが想定通りではなく、解決したいポイントになります。クリックをしても、これを保持して、四則+-*/が保持されていれば、第2項の保持を始めるようにしたいのですが、方法がわかりません。。
guest

回答1

0

ベストアンサー

解決方法としては、$calculatorなどをイベントの外で定義することです。

スコープについて学ばれるといいかと思います。
参考:JavaScript中級者への道【3. 関数スコープ】 - Qiita

投稿2018/02/24 11:44

Lhankor_Mhy

総合スコア36115

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SugiuraY

2018/02/24 15:06

コメントありがとうございます。よく熟読し、コードを書き直したら、難なく解決しました。 基礎をおろそかにしていたことを猛省します。 改めて、ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問