Q&A
元がどうなっていてどういう仕様で
やってみた結果どういう問題が起きてるのか具体的に記載してください。
htmlも一部だと再現できませんし、
jQuery離れが進んでいる昨今で今からあえてjQueryに足を踏み入れるメリットは少ないのではと。
現在jsで作った電卓をjQueryに置き換えるのをやっているのですが、jQueryを習って間もないため全然わからず困っています。
下記に記載した通りjQueryへの書き換えを少しやってみたのですが、値は取れているものの、数字を押してもディスプレイに表示されるのは今押したもののみで、計算もされません。
また×や÷を＊や/にして計算する処理も反映されていません。
＝を押した時もReferenceError: replaceAll is not definedが出てしまいます。
回答者の方々に指摘されたところを直してみたのですが、うまくいかず、元に戻したのが下記のjQueryです。
jqueryをどう修正すれば電卓ができるようになるのかアドバイスいただきたいです。
「現在jsで作った電卓」というのはどういうものですか？ 自分で作ったのであれば、聞かなくても分かる知識はあるはずと思うのですが。
わざわざjsをjQueryに変更する意味はあまりありませんが・・・
もとのjsを提示ください
ボタンの配置もよくわからないのでcssも追記しておいてください
『下記のコードをJQueryバージョンにして』とのことですが、「JQueryバージョンにして」というのは、どういう意味ですか？
jQueryに書き換える、という意味でしたら、「下記のコード」はjQueryで書かれているように見えます。
すみません、修正いたします。
「現在jsで作った電卓」を追記したようですが、それは期待通り動くのでしょうか？ 提示されたコードを見る限りそうは見えないのですが・・・
すみません、jsの時のCSSとHTMLも少しjqueryバージョンに書き換えてしまったので、動かないのかと思われます。
HTMLの
<div id="display" value="0">0</div>
の下
<div class="comm">がｊｓだと
<div class="commands">となっており、
CSSもcommでとってしまってるのを記載しているので、そこも変わります。
またHTMLで
<div class="commands">
の下のdivから全てonclick="calc_func(this)"をｊｓでは入れていました。
細かいですが「jqueryバージョン」という呼び方をやめられたほうが良いです。混乱の元です。
「jQueryの書き方」とかでしょうか。
回答2件
0
ベストアンサー
見つけたものを追記していきます。
.htmlはメソッドです。意図がわからないので何とも言い難いですが、たぶん代入はしない方がいいでしょう。
js
1$('#display').html = (new Function("return " + replace_value))();
.html() | jQuery API Documentation
$('÷', '/')ですが、$()にはいくつかのパターンがありますが、文字列の引数を二つ受けるのはこの構文かと思います。
jQuery( selector [, context ] )
この場合、コンテキストのセレクタとして扱われますので、/が有効なセレクタではないということかと思います。
コードの意図がわからないので何とも言えないですが、セレクタの構文に従うのがいいかと思います。
$('÷', '/').replaceAll('×', '*')ですが、replaceAllメソッドは引数が一つです。
.replaceAll() | jQuery API Documentation
new Function("return " + replace_value)()ですが、
js
1 $('#display').text(button_value); 2//... 3 } else if (button_value === "=") { 4 //let replace_value = $('#display').text($('÷', '/').replaceAll('×','*')); 5 let replace_value = $('#display').text(); // ↑は←だとすると、
となっていますので、replace_valueは必ず"="となるため、(function(){return =})()と等価で文法エラーです。
$('#display') += button_valueですが、jQueryオブジェクトに文字列を加算代入してもいいことはなさそうです
display += button_value;ですが、letで宣言されており、その後の参照がなさそうなのでイベント処理が終わってそのまま捨てられてそうです。DOMに反映した方がいいのでは。
let display = $('#display').val();としたり$('#display').html("0")としたり、テキストノードと属性のどちらでデータを扱っているのか統一されていないように思います。
<div id="display" value="0">0</div>ですが、divにvalueという属性は使えないので、data-*属性に変えるか、要素を変えるかした方がいいと思います。
data-* - HTML: HyperText Markup Language | MDN
質問の変更に合わせて追記
display.html(replaceAll("×", "*").replaceAll("÷", "/"))ですが、replaceAllは文字列のメソッドです。また、同名のメソッドがjQueryにもありますので、混同しているのでは？
String.prototype.replaceAll() - JavaScript | MDN
display.text() += button_valueですが、text()の戻り値は文字列なので、代入できません。代入式の左辺に来ることができるのは、変数などです。
Returns: String
.text() | jQuery API Documentation
text()で中身のテキストを変更したい場合は、引数を渡して呼び出す必要があります。
Set the content of each element in the set of matched elements to the specified text.
.text() | jQuery API Documentation
投稿2022/06/01 03:08
編集2022/06/06 08:27総合スコア37481
全然気づきませんでした汗
直します！
$('#display').text($('÷', '/').replaceAll('×','*'));
についてなのですが、下記のリンクのやり方でやってみたら、それについてはエラーは出ないのですが、＝を押すと
SyntaxError: Unexpected identifier
at new Function (<anonymous>)
at HTMLDivElement.
が出ます汗
意味を調べたのですが、よくわからなかったです汗
https://sigt.jp/blog/jquery-replace-multiple/
具体的なコードがないと何とも言えないですが、エラーメッセージは文法エラーなので、おそらく引用符の閉じ忘れとかその辺かな、と想像してます。
下記のようにうやってみました！
let replace_value = $('.command is-operator').each(function(){
let txt = $(this).html();
$(this).html(
txt.replace(/÷/g,'/').replace(/×/g,'*')
);
});
4番目に指摘済みの件かもしれないですね。
ありがとうございます！
修正してみます！
すみません、あれから書き直してみたのですが、同じエラーが出続け、コードもごちゃごちゃになってしまいわけわからなくなってしまいました。
参考にできるようなソースコードを送っていただくことはできないでしょうか？
「参考にできるようなソースコード」のイメージが付かないです。
電卓が動作しているコードは、お手元にあるのですよね？ それが一番参考になりそうな気がします。
とりあえず、あれこれ手を付けずにひとつひとつエラーを潰していってはいかがでしょうか。
何から何までありがとうございます！
この参考サイトを元に書き換えてみます！
すみません、この参考サイトを丸コピしたのですが、-3 + 3をすると６と出たり、-3 - -3は-3
と出てきてしまいます汗
世の中にある一般的な電卓は、減算の「-」と符号の「-」は別のキーを割り当ててますよ。
そうですよね、別でそれ用のボタンを追加してみます！
追記ありがとうございます！
理解が乏しく、せっかく細かくご丁寧にご指摘してくださったのに、うまく組み込むことができずすみません汗
追記していただいたものをちゃんと調べて組み込んでみます！
無事できました！
ありがとうございました！！！
お役に立てたようで何よりです
0
divにvalue属性を設定するのはNGですdata-valueなどカスタムデータにしてください
投稿2022/06/01 04:05
総合スコア117902
ありがとうございます！
修正します！
あなたの回答
tips
プレビュー
