プロが教えるわが家の防犯対策術！

電卓のJavaScript

解決済

  • 質問者：rinnshan
  • 質問日時：
  • 回答数：5件

初心者で申し訳ないのですが、電卓のソースを作ってみたのですが、JavaScriptが間違っているためか「ページにエラーが発生しました」となり計算が行われません。

どのように、改変すればいいのでしょうか？どうかご教授お願いします。

<html>
<head>
<title> 電卓 </title>
<script language = "JavaScript">
count = 0;
sum= 0;
flag =0;
list = new Array( "0", "0","0","0","0",);
function clist( ) {
for( i = 0 ; i < 5 ; i++ ) {
list[i] =0;
}
}
function calc1() {
num = sum;
clist( );
display.value = num;
flag = 1;
}
function calc2() {
num = sum;
clist( );
display.value = num;
flag = 2;
}
function calc3() {
num = sum;
clist( );
display.value = num;
flag = 3;
}
function calc4() {
num = sum;
clist( );
display.value = num;
flag = 4;
}
function calc5() {
clist( );
}
function equal() {
if(flag==1) {
sum=num+sum;
display.value=sum;
clist( );
}
else if(flag==2) {
sum=num-sum;
display.value=sum;
clist( );
}
else if(flag==3) {
sum=num*sum;
display.value=sum;
clist( );
}
else if(flag==4) {
sum=num/sum;
display.value=sum;
clist( );
}
}
function push0( ) {
list[count] = 0;
sum = list[count];
for( i = 0 ; i < count ; i++ ) {
temp=1;
for( j = i ; j < count ; j++ ) {
temp=temp*10;
}
sum+ =list[i]*temp;
}
count+=1;
display.value=sum;
}

function push1( ) {
list[count] = 1;
sum = list[count];
for( i = 0 ; i < count ; i++ ) {
temp=1;
for( j = i ; j < count ; j++ ) {
temp=temp*10;
}
sum+ =list[i]*temp;
}
count+=1;
display.value=sum;
}
同様に２～９
</script>
</head>
<body>
<hr><br>
<input type = "button" value ="7" onclick = "push7()">&nbsp
<input type = "button" value ="8" onclick = "push8()">&nbsp
<input type = "button" value ="9" onclick = "push9()">&nbsp&nbsp
<input type = "button" value ="+" onclick = "calc1()">&nbsp<br><br>
<input type = "button" value ="4" onclick = "push4()">&nbsp
<input type = "button" value ="5" onclick = "push5()">&nbsp
<input type = "button" value ="6" onclick = "push6()">&nbsp&nbsp
<input type = "button" value ="-" onclick = "calc2()">&nbsp<br><br>
<input type = "button" value ="1" onclick = "push1()">&nbsp
<input type = "button" value ="2" onclick = "push2()">&nbsp
<input type = "button" value ="3" onclick = "push3()">&nbsp&nbsp
<input type = "button" value ="×" onclick = "calc3()">&nbsp<br><br>
<input type = "button" value ="0" onclick = "push0()">&nbsp
<input type = "button" value ="=" onclick = "equal()">&nbsp
<input type = "button" value ="C" onclick = "calc5()">&nbsp&nbsp
<input type = "button" value ="÷" onclick = "calc4()">&nbsp<br><br>
<br><br><hr><br>&nbsp&nbsp&nbsp
<input type = "text" size ="10" name = "display">&nbsp
<br><br><hr><br>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： leap_day
  • 回答日時：

こんにちは



長くなりそうなのでサンプルコードは他の方同様に試してはないですが
電卓を創ってるのならこんな感じかな～？
複雑な計算は試してないけどとりあえず計算できてると思う・・・

<script language="javascript">
<!--
function push(n) {
num = document.getElementById("display").value;
if(num == "0") num = "";
num0 = num + n;
document.getElementById("display").value = num0;
}

function pushs(n) {
num = document.getElementById("display").value;
num1 = document.getElementById("pre").value;
if (num == "" && num1 == "" || num == "0") return false;
else document.getElementById("display").value = num + n;
}

function calc(n) {
if(document.getElementById("display").value == "") return false;
document.getElementById("pre").value = document.getElementById("display").value;
document.getElementById("pre1").value = "";
document.getElementById("sisoku").value = n;
document.getElementById("display").value = "";
}

function equal() {
if(document.getElementById("sisoku").value == "/" && document.getElementById("display").value == "0") {return false;}
if(document.getElementById("pre1").value == "" ) {
document.getElementById("pre1").value = document.getElementById("display").value;}
else { document.getElementById("pre").value = document.getElementById("display").value; }
if(document.getElementById("pre").value == "") return false;
if(document.getElementById("pre1").value == "") return false;
i = eval(document.getElementById("pre").value);
j = eval(document.getElementById("pre1").value);
k = document.getElementById("sisoku").value;
n = eval(i + k + j);
document.getElementById("display").value = "";
document.getElementById("display").value = n;
}

function cl() {
document.getElementById("display").value = "";
document.getElementById("pre").value = "";
document.getElementById("pre1").value = "";
document.getElementById("sisoku").value = "";
}

//-->
</script>
<style type="text/css">
div {
width:150px;
text-align:center;
background-color:gray;
}
.input {
width:25px;
}
</style>
</head>
<body>
<div>
<hr><br>
<input type = "button" value ="7" class="input" onclick = "push(7)">
<input type = "button" value ="8" class="input" onclick = "push(8)">
<input type = "button" value ="9" class="input" onclick = "push(9)">
<input type = "button" value ="+" class="input" onclick = "calc(this.value)"> <br><br>
<input type = "button" value ="4" class="input" onclick = "push(4)">
<input type = "button" value ="5" class="input" onclick = "push(5)">
<input type = "button" value ="6" class="input" onclick = "push(6)">
<input type = "button" value ="-" class="input" onclick = "calc(this.value)"> <br><br>
<input type = "button" value ="1" class="input" onclick = "push(1)">
<input type = "button" value ="2" class="input" onclick = "push(2)">
<input type = "button" value ="3" class="input" onclick = "push(3)">
<input type = "button" value ="*" class="input" onclick = "calc(this.value)"> <br><br>
<input type = "button" value ="0" class="input" onclick = "pushs(0)">
<input type = "button" value ="=" class="input" onclick = "equal()">
<input type = "button" value ="C" class="input" onclick = "cl()">
<input type = "button" value ="/" class="input" onclick = "calc(this.value)"> <br><br>
<hr>
<input type="hidden" id="pre">
<input type="hidden" id="sisoku">
<input type="hidden" id="pre1">
<input type="text" style="width:100px" id="display">
<br><hr>
</div>


あと文字盤の配列に小数点がなかったので無視しましたけど（『C』はクリアボタンですよね？）つけるのであれば

function pushc(n) {
num = document.getElementById("display").value;
if (num.match(/\./))return false;
if(num == "") {num = 0; }
num0 = num + n;
document.getElementById("display").value = num0;
}


<input type="button" value="." class="input" onClick="pushc(this.value)">

を新規に付け加えて

function equal(n) { } 内の
n = eval(i + k + j);の後ろに

n = Math.round(n*1000000)/1000000;

を付け加えてください（小数第6位まで表示します）
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： yambejp
  • 回答日時：

＃１です


文法ミスと、指摘を反映させたソースです。
めんどうなので細かくは検証していませんが、とりあえず、０と１と
四則演算は動いているみたいですね。
それとあくまでも元ソースをいかしたものですので、基本的には
手をいれてません。そもそも私ならこんな書き方をしませんので・・・
まぁ初心者ということでがんばってください。

<html>
<head>
<title> 電卓 </title>
<script language = "JavaScript">
window.onload=function(){
display=document.getElementById('display');
}
count = 0;
sum= 0;
flag =0;
list = new Array( "0", "0","0","0","0");
function clist( ) {
for( i = 0 ; i < 5 ; i++ ) {
list[i] =0;
}
}
function calc1() {
num = sum;
clist( );
display.value = num;
flag = 1;
}
function calc2() {
num = sum;
clist( );
display.value = num;
flag = 2;
}
function calc3() {
num = sum;
clist( );
display.value = num;
flag = 3;
}
function calc4() {
num = sum;
clist( );
display.value = num;
flag = 4;
}
function calc5() {
clist( );
}
function equal() {
if(flag==1) {
sum=num+sum;
display.value=sum;
clist( );
}
else if(flag==2) {
sum=num-sum;
display.value=sum;
clist( );
}
else if(flag==3) {
sum=num*sum;
display.value=sum;
clist( );
}
else if(flag==4) {
sum=num/sum;
display.value=sum;
clist( );
}
}
function push0( ) {
list[count] = 0;
sum = list[count];
for( i = 0 ; i < count ; i++ ) {
temp=1;
for( j = i ; j < count ; j++ ) {
temp=temp*10;
}
sum+=list[i]*temp;
}
count+=1;
display.value=sum;
}

function push1( ) {
list[count] = 1;
sum = list[count];
for( i = 0 ; i < count ; i++ ) {
temp=1;
for( j = i ; j < count ; j++ ) {
temp=temp*10;
}
sum+=list[i]*temp;
}
count+=1;
display.value=sum;
}
//同様に２～９
</script>
</head>
<body>
<hr><br>
<input type = "button" value ="7" onclick = "push7()">&nbsp
<input type = "button" value ="8" onclick = "push8()">&nbsp
<input type = "button" value ="9" onclick = "push9()">&nbsp&nbsp
<input type = "button" value ="+" onclick = "calc1()">&nbsp<br><br>
<input type = "button" value ="4" onclick = "push4()">&nbsp
<input type = "button" value ="5" onclick = "push5()">&nbsp
<input type = "button" value ="6" onclick = "push6()">&nbsp&nbsp
<input type = "button" value ="-" onclick = "calc2()">&nbsp<br><br>
<input type = "button" value ="1" onclick = "push1()">&nbsp
<input type = "button" value ="2" onclick = "push2()">&nbsp
<input type = "button" value ="3" onclick = "push3()">&nbsp&nbsp
<input type = "button" value ="×" onclick = "calc3()">&nbsp<br><br>
<input type = "button" value ="0" onclick = "push0()">&nbsp
<input type = "button" value ="=" onclick = "equal()">&nbsp
<input type = "button" value ="C" onclick = "calc5()">&nbsp&nbsp
<input type = "button" value ="÷" onclick = "calc4()">&nbsp<br><br>
<br><br><hr><br>&nbsp&nbsp&nbsp
<input type = "text" size ="10" name = "display" id="display">&nbsp
<br><br><hr><br>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.3

ん、#2のコードだとまだ不完全っぽい



6*=
6/=
とかしょっぱな打つと0とかInfinityが表示される

正しくは両方とも6が表示されること。

明日ちょっと考えてみよう。今日は眠い。
    • good
    • 0
    • 件
通報する
この回答へのお礼

う～ん、何のことを言っているのでしょうかね？
初心者ですみませんm(_ _)m

通報する
お礼日時：2007/06/28 11:07

No.2

Q3120678-2.html


================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>テスト</title>
<style type="text/css">
dt,dd{
height:2ex;
}
</style>
<script type="text/javascript" src="Q3120678-2.js"></script>
</head>
<body onload="init();">

<h1>電卓</h1>
<p>元のソースが冗長で直しようがないくらい酷かったので何だかよくわからなかったので参考にせずに作り直してみた。</p>
<p>Minefield/Firefox 3.0a6preとOpera9.21で動作確認済み</p>
<table>
<caption>電卓のキー</caption>
<tbody>
<tr>
<td><input type="button" value="7" onclick="stack(this.value);" /></td>

<td><input type="button" value="8" onclick="stack(this.value);" /></td>
<td><input type="button" value="9" onclick="stack(this.value);" /></td>
<td><input type="button" value="+" onclick="switchIndex(this.value);"/></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="stack(this.value);" /></td>
<td><input type="button" value="5" onclick="stack(this.value);" /></td>
<td><input type="button" value="6" onclick="stack(this.value);" /></td>
<td><input type="button" value="-" onclick="switchIndex(this.value);" /></td>

</tr>
<tr>
<td><input type="button" value="3" onclick="stack(this.value);" /></td>
<td><input type="button" value="2" onclick="stack(this.value);" /></td>
<td><input type="button" value="1" onclick="stack(this.value);" /></td>
<td><input type="button" value="*" onclick="switchIndex(this.value);" /></td>
</tr>
<tr>
<td><input type="button" value="0" onclick="stack(this.value);" /></td>

<td><input type="button" value="=" onclick="switchIndex(this.value);"/></td>
<td><input type="button" value="C" onclick="clean();" /></td>
<td><input type="button" value="/" onclick="switchIndex(this.value);" /></td>
</tr>
</tbody>
</table>
<dl>
<dt>式(ただし乗除が優先されない)</dt>

<dd id="formula"> </dd>
<dt>答え</dt>
<dd id="answer"> </dd>
</dl>
</body>
</html>
==========================================
Q3120678-2.js
=========================================
var operand;
var TargetOperandIndex;
var OperationIndex = "+";
var Answer;
var Formula;
var equalafter = true;

/* 全てのtextContentをinnerTextに書き換えたらIE 7でも動作する。*/

function init(){

operand = new Array(2);
Answer = document.getElementById("answer");
Formula = document.getElementById("formula");
equalafter = 0;
clean();
};

function clean(){

operand[0] = 0;
operand[1] = 0;

result = 0;

TargetOperandIndex = 0;
OperationIndex = 0;

Answer.textContent = "";
Formula.textContent = "";

equalafter = false;

};

function stack(num){

if(equalafter == true){

clean();

}

operand[TargetOperandIndex] = 10 * operand[TargetOperandIndex] + parseInt(num);
Formula.textContent = Formula.textContent + num;
Answer.textContent = operand[TargetOperandIndex];

};

function switchIndex(Index){

Formula.textContent = Formula.textContent + Index;

TargetOperandIndex = TargetOperandIndex + 1;


if (TargetOperandIndex == 2||Index == "="){

operand[0] = operation();
operand[1] = 0;
Answer.textContent = operand[0];
TargetOperandIndex = 1;

}

if (Index == "="){
equalafter = true;
}
else
{

equalafter = false;


}

OperationIndex = Index;

};

function operation(){

switch (OperationIndex) {
case "+":
return operand[0] + operand[1];
break;

case "-":
return operand[0] - operand[1];
break;

case "*":
return operand[0] * operand[1];
break;

case "/":
return operand[0] / operand[1];
break;
case "=":
return operand[0];
break;

}


};
    • good
    • 0
    • 件
通報する
この回答へのお礼

これはすごいです(・_・;

しかし、私はプログラミングの基礎しかかじっていないので、
できるだけ文型を変えてほしくはなかったです。

しかも、答えのコンボボックスがなかったのですが、どういうこと
でしょうか？

通報する
お礼日時：2007/06/28 11:06

No.1

  • 回答者： yambejp
  • 回答日時：

あきらかな文法ミスは２点。



×list = new Array( "0", "0","0","0","0",);
○list = new Array( "0", "0","0","0","0");

×sum+ =list[i]*temp;
○sum +=list[i]*temp;
※これは２箇所ありますね。

それと、
display.value=sum;
とあるのですが、displayを<input type = "text" size ="10" name = "display">
と認識させるのはきびしいですね。

せめて
<input type = "text" size ="10" name = "display" id="display">
として、
document.getElementById('display').value=sum;
としてください
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございました。

list = new Array( "0", "0","0","0","0");とsum +=list[i]*temp;と
ついでにcount+=1;もcount +=1;に改変しました。

しかし、やはり「ページにエラーが発生しました」となってしまいますね(^_^;

<input type = "text" size ="10" name = "display" id="display">
として、document.getElementById('display').value=sum;とするのが
よくわからないのですが・・どういうことでしょうね？

通報する
お礼日時：2007/06/28 11:04

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報