jQueryで電卓を作成する際の不具合
- 引き算をすると二週目の計算に不具合が生じてしまいます。
- さらに次の計算を行うと負の値になってしまいます。
- また、かけ算の場合は2週目の計算結果が0になってしまいます。
- ベストアンサー
jQueryで電卓を作っているのですが
現在、以下のようなコードで電卓を作成しているのですが。 このコードだと足し算だけならできたのですが 引き算をすると二週目の計算に不具合が生じてしまいます。 例えばどのような不具合かと言うと 30 - 10 = 20 ←この段階では問題はありません。 しかし、この答えからさらに次の計算を行うと 20 - 5 = -15 ←このようになぜか負の値になってしまいます。 自分なりに何が原因なのかを調べてみたのですが 足し算のほうは問題なく表示されるだけに なぜどこからとも無く-の記号が現れるのか分からない状況です。 ちなみにかけ算も試してみたのですがかけ算の場合は2週目の計算結果が0に なってしまいます。 この問題はどのように記述すれば解決できるのでしょうか？ 分かる方お願いします。 ～～HTML～～ <body> <span> <div></div> <section></section> <section> <ul> <li></li><li></li><li></li><li>AC</li> </ul> <ul> <li>1</li><li>2</li><li>3</li><li>+</li> </ul> <ul> <li>4</li><li>5</li><li>6</li><li>-</li> </ul> <ul> <li>7</li><li>8</li><li>9</li><li>×</li> </ul> <ul> <li>0</li><li>.</li><li>=</li><li>÷</li> </ul> </section> </span> </body> ～～jQuery～～ /*数字の入力*/ $(".num").click(function(){ var num = $(this).text(); if(inputZ.text() == "" && num == 0){ inputZ.append(num + "."); } else{ inputZ.append(num); } }); /*リセット*/ $(".reset").click(function(){ inputZ.text(""); divTxt = Div.text(""); }); /*加算*/ $(".addition").click(function(){ if(inputZ.text() == ""){ leftFml_01 = rightFml_01 } else{ leftFml_01 = parseFloat(inputZ.text()); } inputZ.text(""); divTxt_01 = Div.text(leftFml_01 + " +"); Ans.click(function(){ if(inputZ.text() == ""){ rightFml_01 = leftFml_01; } else{ rightFml_01 = parseFloat(inputZ.text()); } reply_01 = leftFml_01 + rightFml_01; inputZ.text(reply_01); leftFml_01 = null; divTxt_01.text(""); }); }); /*減算*/ $(".subtraction").click(function(){ if(inputZ.text() == ""){ leftFml_02 = rightFml_02 } else{ leftFml_02 = parseFloat(inputZ.text()); } rightFml_02 = null; inputZ.text(""); divTxt_02 = Div.text(leftFml_02 + " -"); Ans.click(function(){ if(inputZ.text() == ""){ rightFml_02 = leftFml_02; } else{ rightFml_02 = parseFloat(inputZ.text()); } reply_02 = leftFml_02 - rightFml_02; inputZ.text(reply_02); leftFml_02 = null; divTxt_02.text(""); }); }); });
- shodan
- お礼率53% (17/32)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
演算が行われる度に イベントリスナが Ans.click(function(){ で登録されているからです 新しいイベントリスナを登録しても 古いのが消えたりはしません どんどん溜まっていき、１回のクリックでいくつも呼ばれることになります その結果 １番目に呼ばれたイベントリスナで reply_02 = leftFml_02 - rightFml_02; が例えば 30 - 10 で reply_02 に20が入りinputZが20になります 次は inputZがrightFml_02になり、leftFml_02 は nullになっているので null - 20 で inputZが-20になります もしイベントリスナが３つ登録されていれば さらに null - -20 となって 20に ４つならば また-20になります こういった現象がおきています 簡単なのは unbind("click") を全ての Ans.click(function(){ の前において イベントリスナをクリアすることです
関連するQ&A
- JQueryについて教えて下さい。
html部分は <ul> <li>テスト1です。</li> <li>テスト2です。</li> <li>テスト3です。</li> </ul> <div id="test">test</div> となっており、 スクリプト部分は、 $("ul li:not(:first)").css("display","none"); $("#test").click(function(){ if($("+li",this).css("display")=="none"){ $("li").slideUp("slow"); $("+li",this).slideDown("slow"); } }); としています。 やりたいことは、"test"をクリックしたら、 次の"li"が表示されるようにしたいのですが、 動きません。 どなたかご教授よろしくです。
- ベストアンサー
- JavaScript
- jquery 親要素以外の取得
下記のような形で200をクリックしたら<li>に200を持つ<ul>以外の<ul>の色変えをしたいと思っています。 <button id="100">100</button> <button id="200">200</button> <button id="300">300</button> <div> <ul> <li>100</li><li>150</li> </ul> <ul> <li>200</li><li>250</li> </ul> <ul> <li>300</li><li>350</li> </ul> ・ ・ </div> このようなhtmlで200のボタンを押したとき<li>中身が200の<ul>はそのまま、他の<ul>を色変えする形です。 $('button#200').click(function(){ $('ul li').each(function(){ var siz = $(this).text(); if(siz == '200'){ $(this).parent().css('background','#ccc'); } }) }); 200を押したとき<li>200を含む<ul>を色変えはできましたが、それ以外を変える場合がわかりません。 どうかご教授お願いします。
- ベストアンサー
- JavaScript
- jqueryにてIEでの不具合 each処理？
cromeやfirefoxでは正常に動きますが、IEにて一部動いてくれない部分があり困っています。 おかしな点や原因など教えていただきたくご質問させていただきます。 <style> .that{color:red;} </style> <script type="text/javascript"> $(function(){ $('button').click(function(){ $('#list>ul').removeClass('that'); var val = $(this).text(); $('#list>ul li').each(function(){ if($(this).text() == val){ $(this).parent().addClass('that'); }; }); }); }); </script> html↓ <button>100</button> <button>200</button> <button>300</button> <div id="list"> <ul> <li>100</li><li>200</li> </ul> <ul> <li>300</li><li>200</li> </ul> </div> クリックしたボタンの数値があるULの色を変えるものです。 100と300をクリックした場合は正常に変わりますが、200をクリックした時に変わらなくなります。 <li>の中で最後に書かれている数値が効かなくなるようで、<li>の100と200を入れ替えると100が効かなくなります。（IEのみ） 原因等わかりましたらよろしくお願いいたします。
- ベストアンサー
- JavaScript
- jquery教えて下さい。
現在、 <script type="text/javascript"> $(function(){ $("#btn1","#test2").click(function () { $("div","#test2").slideDown(3000); }); }); </script> のコードで btn1のidボタン▼をクリックすると test2がslidedownするコードを造っているのですが これをボタンを押さずに ページがひらいたと同時にスライドするにはどのように すればよろしいでしょうか？ 宜しくお願いします。 <div id="test2"> <div style="display:none;"><div class="slide"> <ul> <li class="setsumei1">test1</li> <li class="setsumei1">test2</li> <li class="setsumei1">test3</li> <li class="setsumei1">test4</li> </ul> </div></div> <div id="btn1">▼</div> </div>
- ベストアンサー
- JavaScript
- jQueryで６行表示のループ
大雑把な質問なのですが、自分でもわかっているのですが、 もっと簡単なやり方がないものかと色々とやっていたのですが、 ありませんでしょうか？ $(document).ready(function() { var nCnt2 = 1; var nMax2 = 6; if(nMax2 < $('ul#portfolio li').length) { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').each(function() { if(nCnt2 <= nMax2) { $(this).fadeIn('slow').removeClass('hidden'); } nCnt2++; }); } $('ul#navi a').click(function() { $(this).css('outline','none'); $('ul#navi .all').removeClass('current'); $(this).parent().addClass('current'); var filterVal = $(this).text().toLowerCase().replace(' ','-'); var nCnt = 1; var nMax = 6; if(filterVal == 'all') { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').each(function() { if(nCnt <= nMax) { $(this).fadeIn('slow').removeClass('hidden'); } nCnt++; }); } else { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li').each(function() { if(!$(this).hasClass(filterVal)) { $(this).fadeOut('normal').addClass('hidden'); } else if (nCnt <= nMax) { $(this).fadeIn('slow').removeClass('hidden'); nCnt++; } }); } return false; }); });
- 締切済み
- JavaScript
- jQueryのアコーディオンがIE6でちゃんと動いてくれない
jQueryのアコーディオンがIE6でちゃんと動いてくれない Mac osX 10.5.8 dreamweaver cs3 jQueryのアコーディオン機能を使い、2階層のサイドナビゲーションを作っています。しかし、それをIE6で確認すると２階層目だけが開いてくれません。＞＜MacのSafariなどではちゃんと動いています。 【構造】 （例：HTML） <div id="side"> <h3>製品紹介</h3> <div id="tab01"> <h4><img src="tab01.png" width="210" height="35" alt="" /></h4> <ul> <li><a href="#">会社概要</a></li> <li class="inner"><a href="#">製品紹介</a></li> <ul class="down"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> <li class="inner"><a href="#">会社沿革</a></li> <li><a href="#">企業理念</a></li> </ul> </div> <div id="tab02"> <h4><img src="images/tab02.png" width="210" height="35" alt="" /></h4> <ul> ーーーーー ＜同上のような構造＞ ーーーーー </ul> </div> </div> <!--side end--> （例：jquery（外部js）） $(document).ready(function() { var main = $("#side ul"); main.hide(); $("#side h4").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side h4").click(function(){ $(this).next().slideToggle('fast'); }); }); $(document).ready(function() { var main = $("#inner ul"); main.hide(); $("#side li.inner").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side li.inner").click(function(){ $(this).next().slideToggle('fast'); }); }); と、このような構造になっております。 h4をクリックするとその中身がスムーズに開閉、li.innerをクリックするとul.down内がスムーズに開閉。という形です。 どうか、ご教授のほうよろしく御願いします。
- 締切済み
- HTML
- jＱueryで作ったドロワーメニューに画像が被る
トップページにjＱueryを使ってドロワーメニューとカルーセルとアコーディオンメニューを作成しました。 それぞれは作動するのですが、ドロワーを一番上に表示させたいのにカルーセルとアコーディオンメニューが上に被ってしまいます。 jQueryは初心者です。よろしくお願いします。 【html】 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script> <script src="js/slick.min.js"></script> </head> <body> <div id="wrapper"> <header id="header"> <div class="navDrawrBtn"><span></span></div> <nav class="navDrawr" role="tablist"> <ul> <li> <a>A</a> <ul class="sub" role="tabpanel"> <li><a>a</a></li> <li><a>b</a></li> <li><a>c</a></li> </ul> </li> <li> <a>B</a> <ul class="sub" role="tabpanel"> <li><a>a</a></li> <li><a>b</a></li> <li><a>c</a></li> </ul> </li> </ul> </nav></header> <div class="contents"> <section class="carousel"> <div class="gimmicCarousel"> <ul class="slider"> <li><a href="#"><img src="images/carousel_1.jpg"></a></li> <li><a href="#"><img src="images/carousel_2.jpg"></a></li> <li><a href="#"><img src="images/carousel_3.jpg"></a></li> </ul></div></section> <div class="accordion"> <ul> <li> <a class="toggle">C</a> <ul> <li><a href="#">ca</a></li> <li><a href="#">cb</a></li> <li><a href="#">cc</a></li> </ul> </li> <li> <a class="toggle">D</a> <ul> <li><a href="#">da</a></li> <li><a href="#">db</a></li> <li><a href="#">dc</a></li> </ul> </li> <script>// ACCORDION $(function() { function accordion() { $(this).toggleClass("active").next().slideToggle(300); } $(".accordion .toggle").click(accordion); });</script> <script src="js/script.js"></script> </body> </html> 【jcript.js】 $(function () { var $nav = $('.navDrawr'); var $navBtn = $('.navDrawrBtn'); var $speed = 300; var $navW = 270; //サブメニューを非表示に $nav.find('.sub').hide(); //hover時の挙動 $nav.find('li').hover(function(){ // PC表示時（ハンバーガーボタン非表示時）のみにプルダウンを限定 if ($('.navDrawrBtn span').css('display') !== 'block'){ //li要素にhoverした時に.subがあれば実行する if( $(this).find('.sub').length && !$nav.hasClass('open') ){ $(this).find('.sub').slideDown(); } }jj },function(){ // PC表示時（ハンバーガーボタン非表示時）のみにプルダウンを限定 if ($('.navDrawrBtn span').css('display') !== 'block'){ if(!$nav.hasClass('open')) { $(this).find('.sub').stop(true).slideUp(); } } }); //ドロワーに関連した記述(PCでもドロワーが動作するようにtouchend→clickに変更) $('body').on('click','.navDrawrBtn span',function(){ drawerFunc(); }); $('body').on('click','.overlay',function(){ drawerFunc(); }); function drawerFunc(){ if( $('body').hasClass('menuOpen') ){ $('body').removeClass('menuOpen'); $nav.animate({right:-1*$navW},$speed,'swing'); $('.overlay').fadeOut($speed); }else{ $('body').addClass('menuOpen'); if(!$('.overlay').length){ $('#wrapper').prepend('<div class="overlay"></div>'); } $nav.animate({right:0},$speed,'swing'); $('.overlay').fadeIn($speed); } } }); //カルーセルの設定 $(function () { $('.gimmicCarousel .slider').slick({ accessibility: true, dots: true, autoplay: true, autoplaySpeed:3000, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 768, settings: { slidesToShow: 2, slidesToScroll: 1, } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, } } ] }); });
- ベストアンサー
- JavaScript
- jQuery mobileのイベントについて
jQuery mobile 1.0で使えていたイベントが1.1.1で使えなくなりました。 何か仕様が変わったのでしょうか？ よろしくお願いします。 例： $("div:jqmData(role='collapsible')").each(function(){ // ここが機能しなくなった bindEventTouch($(this)); }); function bindEventTouch(element) { element.bind('tap', function(event, ui) { if(element.hasClass('ui-collapsible-collapsed')) { } else { $('#' + element.attr('id') + 'l li').remove(); $('#' + element.attr('id') + 'l').append("<li>I'm Header #FF</li>"); } }); }
- 締切済み
- JavaScript
- jQueryでHTML表示の部分
jQueryで表示されるデータをHTMLで表示するのですが、 色々いじっていたのですが、表示されなかったり<li>タグだけしかひょうじされなかったりして、 いまいちわからなくて、質問を致しました。 -現在の表示------------ <li>No：1 Title：タイトル</li> ----------------------- <li>タグの中にclassを追加したいのですが、 どうすれば、<li>タグにclassが追加されるのでしょうか。 ----------------------------------- <li class="test">No：1 Title：タイトル</li> ----------------------------------- こんな感じに表示させたいのです。 大変申し訳ございませんが、よろしくお願い致します。 <script type="text/javascript"> jQuery(function(){ $.getJSON("./json_sql.php",function(data){ $('p','#demo').remove(); $('#demo').append('<ul/>'); $.each(data,function(i,items){ $("<li/>",{ text:'No：'+items.no+' Title：'+items.title }).appendTo('ul','#demo'); }); }); }); </script> <div id="demo"> <h4>リスト</h4> </div>
- ベストアンサー
- JavaScript
- jQueryでデータを受け渡しで動作が・・・。
jQueryでデータを受け渡しで動作がどうしてもうまくいきません。 <li>タグにjsonデータを呼び出して表示しています。 それで別の処理のデータを加えるとどうしても最大６行表示の方が機能しなくなってしまいどうしたらうごくのでしょうか？ 普通においただけではダメなのでしょうか？ <script type="text/javascript"> jQuery(function(){ $.getJSON("./json_sql.php",function(data){ $.each(data,function(i,items){ $("<li/>",{ text : items.category+' '+ items.date+' '+items.content, 'class' : items.category, }).appendTo('ul','#portfolio'); }); }); }); $(document).ready(function() { var max = 6 /* 最大表示数 */ var mx = ':lt(' + max + ')', pf = $('#portfolio li'); pf.filter(':not(' + mx + ')').hide(); $('#navi a').click(function(){ var filterVal = '.' + $(this).text().toLowerCase().replace(' ', '-'); if(filterVal=='.all') filterVal = '*'; pf.filter(':visible').fadeOut('fast', function(){ pf.filter(filterVal + mx).fadeIn('slow'); }); }); }); </script> <div id="main"> <ul id="navi" class="tab"> <li class="all"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#e2260d';">ALL</a></li> <li class="topix"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0f639f';">topix</a></li> <li class="cleaning"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0e99b0';">cleaning</a></li> <li class="insurance"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0ea653';">insurance</a></li> </ul> <div id="samplebox"></div> <div class="content"> <ul id="portfolio"></ul> </div> <!--/ .main--> </div>
- 締切済み
- JavaScript
お礼
回答ありがとうございます。 まだ勉強不足でイベントリスナというものを知らないので全ては理解できませんが それは自分で調べるとして 未熟な僕でもだいたいは分かるくらい丁寧に回答して頂いてることは分かりましたし 原因を教えていただけたので何倍も調べやすくなりました。 ありがとうございました。