のですが、分からないコードがあります。以下のコードです。
~HTML~
<form name="dentaku">
<input type="text" name="line" value="0">
<input type="button" value="C" onclick="cl()">
<input type="button" value=" 7 " onclick="val(7)">
<input type="button" value=" 8 " onclick="val(8)">
<input type="button" value=" 9 " onclick="val(9)">
<input type="button" value="÷" onclick="keisan('/')">
<input type="button" value=" 4 " onclick="val(4)">
<input type="button" value=" 5 " onclick="val(5)">
<input type="button" value=" 6 " onclick="val(6)">
<input type="button" value="×" onclick="keisan('*')">
<input type="button" value=" 1 " onclick="val(1)">
<input type="button" value=" 2 " onclick="val(2)">
<input type="button" value=" 3 " onclick="val(3)">
<input type="button" value="-" onclick="keisan('-')">
<input type="button" value=" 0 " onclick="val(0)">
<input type="button" value=" ・ " onclick="val('.')">
<input type="button" value=" + " onclick="keisan('+')">
<input type="button" value="=" onclick="keisan('=')">
</form>
~JavaScript~
total = 0;
input = "";
ope = "+";
flg = 1;
function val(data) {
flg = 0;
input += data;
document.dentaku.line.value = input;
}
function keisan(data) {
if (flg == 0) {
flg = 1;
cf = total + ope + input;
total = eval(cf);
input = "";
document.dentaku.line.value = total;
}
if (data == "=") {
total = 0;
ope = "+";
} else {
ope = data;
}
}
function cl() {
total = 0;
ope = "+";
input = "";
document.dentaku.line.value = total;
}
関係のないコードは省略してあります。また、CSSも省略しますが、テーブル要素を使わず以下の画像のようにインライン要素(input要素)の性質を利用して回り込みをさせています。
長くなりましたが、そこで質問なのですが、
(1)変数ope(operandの略)なのですが、初期値は+なのに演算子ボタン(上記のHTMLコード)をクリックすると、なぜ値がその演算子に変わるのか理由を教えて下さい。
何となく理由は分かりますが、はっきりと理解したいです。
(2)上記のHTMLコードをもっと簡単に書けませんか?
特にonclickをボタンの数だけ書くのは手間です。
No.1ベストアンサー
- 回答日時:
(1)
keisanが呼ばれて
dataが=以外だったらope = dataになってるから。
dataにはonclickで指定した値が入っている。
(2)いちいちonclickが面倒となると、こんな感じかな。
ただhtmlに書くものは増える
<input type="text" name="line" value="0">
<button type="button" value="C">C</button>
<button type="button" value="7"> 7 </button>
<button type="button" value="8"> 8 </button>
<button type="button" value="9"> 9 </button>
<button type="button" value="/">÷</button>
<button type="button" value="4"> 4 </button>
<button type="button" value="5"> 5 </button>
<button type="button" value="6"> 6 </button>
<button type="button" value="*">×</button>
<button type="button" value="1"> 1 </button>
<button type="button" value="2"> 2 </button>
<button type="button" value="3"> 3 </button>
<button type="button" value="-">-</button>
<button type="button" value="0"> 0 </button>
<button type="button" value="."> ・ </button>
<button type="button" value="+"> + </button>
<button type="button" value="=">=</button>
<script>
var total = 0;
var input = "";
var ope = "+";
var flg = 1;
document.addEventListener('DOMContentLoaded', function(){
var elems = document.querySelectorAll('button');
for (var i = 0; i < elems.length; i ++) {
elems[i].addEventListener('click', function(){
var value = this.value;
if (value.match(/[0-9]+/)) {
flg = 0;
input += this.value;
document.dentaku.line.value = input;
} else if (value === 'C') {
total = 0;
ope = "+";
input = "";
document.dentaku.line.value = total;
} else {
if (flg == 0) {
flg = 1;
cf = total + ope + input;
total = eval(cf);
input = "";
document.dentaku.line.value = total;
}
if (value == "=") {
total = 0;
ope = "+";
} else {
ope = value;
}
}
}, false);
}
}, false);
</script>
ありがとうございました。
input要素のbutton属性のかわりにbutton要素を使うのですね。コードの中の正規表現は問題ないのですが、イベントリスナーはクロスブラウザ問題でトラウマになりました。しかし、コードは大変勉強になりました。
No.2
- 回答日時:
まぁ余計なお世話ですので不要なら聞き流してほしいのですが
evalを使っているウチはプログラミングは上達しないので
できれば別の書き方をされることをお勧めします
今回のケースであればswitchで場合分けをするのが妥当かと
ありがとうございます。
仰るようにevalは良くないと私が持っているJavaScriptの本にも書かれていました。その本には”eval is evil”なんて書かれていました。それはevalがJavaScriptプログラム(特に大規模なもの)において、予想だにしないバグを発生させるからだそうですが、私のようなアマチュアにとってはけっこう重宝します。例えば、”3*5”といった文字列の計算式の計算はparseIntでは無理で、evalではないと無理なんですね。しかし一度、”switch 電卓"でググってみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript jsで質問です。 ボタンが二つ存在し、両方のボタンがクリックされたことをチェックしたいのですが、どの 4 2022/11/22 10:30
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- PHP 重複を防ぐ記述について教えて下さい。 3 2023/04/03 14:35
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
テキストフィールド未入力の場...
-
ボタン押下しテキストエリアに...
-
javaScriptの変数をJavaの変数...
-
追加ボタンを押した際に ok ボ...
-
VBScriptで子画面へ配列のデー...
-
ボタンをクリックして文字を置...
-
クリックさせたいが、click()が...
-
ボタンかリンクをクリックする...
-
if構文
-
JavaScript Form OPTION value
-
vbsでフォーム入力ができません
-
小窓が残像を残して移動
-
ひとつのボタンでタイマーを動...
-
innerHTML内では改行は禁止?
-
BackSpaceしたい(QNo.2734284の...
-
プルダウンで選択したページに...
-
formのfileの値をhiddenでも持...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
iOSのみダブルタップが必要
-
onclickが動作しない
-
追加ボタンを押した際に ok ボ...
-
ボタンかリンクをクリックする...
-
innerHTML内では改行は禁止?
-
クリックさせたいが、click()が...
-
javaScriptの変数をJavaの変数...
-
formのfileの値をhiddenでも持...
-
JavascriptでDOM-based XSSの発...
-
クリックでテーブル内の背景色...
-
VB.NETで<Input>タグ、<text...
-
開いた子ウィンドウにあるボタ...
-
jQueryで設定したイベントハン...
-
javascriptで作成されたテーブ...
-
HTMLのテキストボックスへのド...
-
テキストフィールド未入力の場...
-
JavaScriptのfileオブジェクト...
-
JSのボタンを複数う使うには
-
オンクリックで現在時刻の取得→...
おすすめ情報