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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1472閲覧

html+javascriptで電卓作成 =が動作しない

hakusa.ppl

総合スコア21

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/08/01 03:11

編集2019/08/01 04:31

電卓をjavascriptで機能させたく、イコールの機能を作成しているのですが
参考サイトとと違いcボタンを作成したところ、イコールで表示されるのが
前に入力された数字になってしまいます。

html

1<!DOCTYPE HTML> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>電卓</title> 6</head> 7<body> 8<h1>電卓</h1> 9<hr> 10 11<form name="name"> 12<th colspan="3" align="right"><div id="out">0</div></th> 13<th><div id="type"></div></th> 14 15</form> 16 17<form name="den"> 18<table boder="2"> 19 20<tb><input type="button" value="" onClick="den_run(7)"></tb> 21<tb><input type="button" value="" onClick="den_run(8)"></tb> 22<tb><input type="button" value="" onClick="den_run(9)"></tb> 23<br> 24<tb><input type="button" value="" onClick="den_run(4)"></tb> 25<tb><input type="button" value="" onClick="den_run(5)"></tb> 26<tb><input type="button" value="" onClick="den_run(6)"></tb> 27<br> 28<tb><input type="button" value="" onClick="den_run(1)"></tb> 29<tb><input type="button" value="" onClick="den_run(2)"></tb> 30<tb><input type="button" value="" onClick="den_run(3)"></tb> 31<br> 32<tb><input type="button" value="" onClick="den_run(0)"></tb> 33<tb><input type="button" value="" onClick="den_run('+')"></tb> 34<tb><input type="button" value="" onClick="den_run('-')"></tb> 35<br> 36<tb><input type="button" value="" onClick="den_run('*')"></tb> 37<tb><input type="button" value="" onClick="den_run('/')"></tb> 38<tb><input type="button" value="" onClick="den_clear('C')"></tb> 39<br> 40<tb><input type="button" value="" onClick="den_period('.')"></tb> 41<tb><input type="button" value="" onClick="den_equal('=')"></tb> 42 </table> 43</form> 44 45

javascript

1<script language="javascript"> 2ans = 0; //計算中の数字 3num = "0"; //押された数字キーを順番に表示 4Key = ""; //1つ前に押されたキーの記録 5kigou = ""; //数字かいくつか押された後記号キーの把握 6 7 8function den_run(btn) { //変数btnでキーからの情報を受けとる 9 if(!isNaN(btn)){ //数値か記号かで分岐 10 if(kigou == "=") { 11 ans = 0; 12 kigou = ""; 13 } 14 if(!isNaN(Key)) { //前に押されたキーは 15 if (num == "0") { //numが0の時 16 num = ""+btn; //キーからの情報 17 } else { 18 19   num += ""+btn; //真 連続して数字が押された場合 20 } 21 } else { 22 num = ""+btn; //偽 記号の後数字、数値を文字列 23 } 24 document.getElementById("out").innerHTML = num;  //outの中身をnumへ 25 }else{ 26 if(!isNaN(Key)) { 27 ans = eval(ans + kigou + num); 28 num = "0"; 29 document.getElementById("out").innerHTML = ans; 30 } 31 kigou = btn; //記号を受け取ったらbtnから記号へ 32 document.getElementById("type").innerHTML = kigou; //記号が記録そのまま画面 33 } 34 document.getElementById("type").innerHTML = kigou; 35 Key = btn; //直前のキーは何か 36} 37function den_period() { 38 if (num.indexOf(".")<0) num +="."; //0より小さいときnumに.をプラスする。 39 document.getElementById("out").innerHTML = num; //outの内容書き換え 40} 41 42function den_clear() { 43 if(num == "c") { //現在の数字Cの場合 44 ans = 0; //計算中の数字消去 45 Key = ""; //1つ前の押されたキー削除 46} 47 num = "0"; //画面に何を表示 48 kigou = ""; //記号は何を表示 49 document.getElementById("out").innerHTML = num; 50 document.getElementById("type").innerHTML = kigou; 51} 52 53function den_equal() { 54 if(num == "=") { 55 ans = eval(ans + kigou + num); 56 Key = "="; 57 } 58 num = "0"; 59 kigou = Key; 60 document.getElementById("out").innerHTML = ans; 61 document.getElementById("type").innerHTML = ""; 62} 63</script> 64 65</body> 66</html>

参考と違う処理

javascript

1function den_clear() { 2 if(num == "c") { //現在の数字Cの場合 3 ans = 0; //計算中の数字消去 4 Key = ""; //1つ前の押されたキー削除 5} 6 num = "0"; //画面に何を表示 7 kigou = ""; //記号は何を表示 8 document.getElementById("out").innerHTML = num; 9 document.getElementById("type").innerHTML = kigou; 10} 11 12function den_equal() { 13 if(num == "=") { 14 ans = eval(ans + kigou + num); 15 Key = "="; 16 } 17 num = "0"; 18 kigou = Key; 19 document.getElementById("out").innerHTML = ans; 20 document.getElementById("type").innerHTML = ""; 21}

参考サイト

電卓参考

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

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

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

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

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

m.ts10806

2019/08/01 04:23

HTMLはDOCTYPE 宣言入れるのでしたらbodyもhtmlも閉じタグまできちんと入れてください。
m.ts10806

2019/08/01 04:26

HTMLでおかしい場所がありますが、これは? <input type="buttophpn" value="-" onClick="den_run('-')">
hakusa.ppl

2019/08/01 04:30

すいません、コピペミスで input type="button" value="-" onClick="den_run('-')">が正解です
guest

回答1

0

ベストアンサー

関数と引数に関して学ぶことをおすすめします(回答も書いています)

JavaScriptを学ばれている方とお見受けします。
参考サイトのコードを元に、自分でアレンジを加えてみると言うのはとても良いと思います。
多くの初学者が同様の方法で勉強して、いまプロとして活躍している人もいるでしょう。(自分もそうです)

さて、まずご質問の回答ですがアレンジして作られた関数 function den_clear() function den_equal()に引数の指定が無いようです。

また実行が den_clear('C')となっていて関数が

function den_clear() { if(num == "c") { //現在の数字Cの場合 ans = 0; //計算中の数字消去 Key = ""; //1つ前の押されたキー削除 } num = "0"; //画面に何を表示 kigou = ""; //記号は何を表示 document.getElementById("out").innerHTML = num; document.getElementById("type").innerHTML = kigou; }

こうなっていますが、

  1. den_clear()はクリアボタンを押したときのみに実行される関数なので、現状引数は必要ない
  2. 仮に引数を持たせても良いが、numは変数名で使っているので、他の名前にする
  3. 仮に引数を持たせても良いが、if(num == "c")cが小文字なので、実行時のCと比較しても真(イコール ==)とみなされない。

と、いくつか問題があります。

想定通りの動きを期待する関数にするには
その1(引数はいらない、この関数はクリアボタンを押したときのみ動く。実行時はden_clear()とする)

function den_clear() { ans = 0; //計算中の数字消去 Key = ""; //1つ前の押されたキー削除 num = "0"; //画面に何を表示 kigou = ""; //記号は何を表示 document.getElementById("out").innerHTML = num; document.getElementById("type").innerHTML = kigou; }

その2(引数をもたせ、将来的に複数のクリア機能を付ける)

function den_clear(press_key) { if(press_key == "C") { //現在の数字Cの場合 ans = 0; //計算中の数字消去 Key = ""; //1つ前の押されたキー削除 } num = "0"; //画面に何を表示 kigou = ""; //記号は何を表示 document.getElementById("out").innerHTML = num; document.getElementById("type").innerHTML = kigou; }

と、このようになります。

function den_equal()の方も同様に、引数をもたせてみてください。

また、最初に述べたとおり参考のコードを元に勉強するのはとても良いことですが、
参考にされてサイトはかなり古いようです。

JavaScriptを勉強する場合は特に新し目のコードを参考にすると良いでしょう。

投稿2019/08/01 04:33

編集2019/08/01 04:34
mattari_panda

総合スコア429

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

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

hakusa.ppl

2019/08/01 04:37

励ましの言葉まで! ご丁寧にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問