詳しい人求む！

Javascriptの電卓で最初の何も数字が入っていない時に「00」を打てなくしたい

解決済

質問者：kotamagokotama
質問日時：2021/01/22 15:52
回答数：2件

JS初心者になります。
練習で、あるサイトを参考に電卓を作り、カスタマイズしています。

最初の何も数字が入っていない時に「00」を打てなくしたいのですが、どうもうまくいきません。
何が悪いのでしょうか？

●読み込んだ時は、「00」が押せて、次押せず、何かの数字を押すとまた押せる
（00200は可<おかしい＞。200は無理＜おかしい＞）。

scriptの下の方、
//----問題の箇所　ここから---
内以外で問題はあるのでしょうか？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sample</title>
<style>
#wrap{
width: 450px;
height: 650px;
margin: 0 auto;
padding-top: 25px;
background-color: #FFCC81;
font-size: 25px;
}
table{
width: 400px;
height: 600px;
margin: 0 auto;
background-color: white;
text-align: center;
table-layout: fixed;
border-collapse:separate;
border-spacing:2px;
}
td{
padding:5px!important;
vertical-align: middle;
background-color: #FFF5B4;
border-left: 5px solid #FFFFCC;
border-top: 5px solid #FFFFCC;
border-right: 5px solid #E7C37A;
border-bottom: 5px solid #E7C37A;
}
input{
width: 80px;
height: 80px;
}
.white{
background-color: white;
}
#result{
width: 10.1em;
text-align:right;
}
</style>
</head>
<body>
<div id="wrap">
<table>
<tr>
<td colspan="4" class="white">
<input type="text" id="result">
</td>
</tr>
<tr>
<td>
<input type="button" value="AC" onclick="ac()">
</td>
<td>
<input type="button" value="税10%" onclick="tax1()">
</td>
<td>
<input type="button" value="税0.8%" onclick="tax2()">
</td>
<td>
<input type="button" id="divide" class="cal" value="÷" onclick="edit(this)">
</td>
</tr>
<tr>
<td>
<input type="button" value="7" onclick="edit(this)">
</td>
<td>
<input type="button" value="8" onclick="edit(this)">
</td>
<td>
<input type="button" value="9" onclick="edit(this)">
</td>
<td>
<input type="button" id="multiply" class="cal" value="×" onclick="edit(this)">
</td>
</tr>
<tr>
<td>
<input type="button" value="4" onclick="edit(this)">
</td>
<td>
<input type="button" value="5" onclick="edit(this)">
</td>
<td>
<input type="button" value="6" onclick="edit(this)">
</td>
<td>
<input type="button" id="minus" class="cal" value="-" onclick="edit(this)">
</td>
</tr>
<tr>
<td>
<input type="button" value="1" onclick="edit(this)">
</td>
<td>
<input type="button" value="2" onclick="edit(this)">
</td>
<td>
<input type="button" value="3" onclick="edit(this)">
</td>
<td>
<input type="button" id="plus" class="cal" value="+" onclick="edit(this)">
</td>
</tr>
<tr>
<td>
<input type="button" id="zero" value="0" onclick="edit(this)">
</td>
<td>
<input type="button" id="wzero" value="00" onclick="edit(this)">
</td>
<td>
<input type="button"class="cal" value="." onclick="edit(this)">
</td>
<td>
<input type="button" value="=" onclick="calc()">
</td>
</tr>
</table>
</div>

<script>
let result = document.getElementById("result");

//----問題の箇所　ここから-----------
function edit(elem) {
//何も入っていないときに、00を押しても入力させないようにする
let wzero = document.getElementById("wzero");
if(result.value == "") {
wzero.disabled = true;
}else{
wzero.disabled = false;
}
result.value = result.value + elem.value;
}
//----問題の箇所　ここまで？-----------

function ac(){
let ac = document.getElementById("result").value;
ac = ac.replace(/[0-9]/g,"")
.replace(/"+"/g,"")
.replace(/-/g,"")
.replace(/÷/g,"")
.replace(/×/g,"")
.replace(/./g,"");
document.getElementById("result").value = ac;
}

function calc(){
let okikae = document.getElementById("result").value;
okikae = okikae.replace(/÷/g,"/")
.replace(/×/g,"*");
document.getElementById("result").value = okikae;
result.value = new Function("return " + result.value)();
}
</script>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： Ogre7077
回答日時：2021/01/22 16:20

1. 部品 result の値を設定する関数 setResult(v) を用意

2. setResult 内で、 v == "" なら 00 を無効化、でなければ有効化
3. <body onload> にて setResult("") を呼ぶ
4. result.value = 値としている処理を setResult(値) と変更

- 0
- 件

通報する

この回答へのお礼

お礼が遅くなり、申し訳ございません。
ありがとうございました！
これで書き方があっているのかは謎ですが、
色々試して、なんとかできました。
さらにバージョンアップかけていきたいと思います。

<body onLoad="setResult()">
<div id="wrap">
<table>
<tr>
<td colspan="4" class="white">
<input type="text" id="result">
|
|
|
<script>
let result = document.getElementById("result");
function setResult(v) {
let wzero = document.getElementById("wzero");
v = "";
if(v == "") {
wzero.disabled = true;
}else{
wzero.disabled = false;
}}

function edit(elem) {
let wzero = document.getElementById("wzero");
if(result === "") {
wzero.disabled = true;
}else{
wzero.disabled = false;
}
result.value = result.value + elem.value;
}
|
|
|
function ac(){
let ac = document.getElementById("result").value;
ac = ""
if(ac == "") {
wzero.disabled = true;
}else{
wzero.disabled = false;
}
document.getElementById("result").value = ac;

</script>
</body>
</html>

通報する

お礼日時：2021/01/27 16:20

No.2

回答者： fujillin
回答日時：2021/01/22 17:40

こんにちは

なんだか、普通の電卓とはかなり反応が異なるようですが、それはそれで良いものとして・・・

＞最初の何も数字が入っていない時に「00」を打てなくしたいのですが、
現状の仕様のままであれば、表示が空白になるのは、最初のロード時とACボタンを押したときだけなので、その２通りの時にdisabledをセットするようにしておけば良さそうです。

具体的には、
・HTMLの初期値としてdisabledをセット（これで最初は設定できる）
・関数ac内でdisableをセット
以上で、セットはできます。
disabledの解除は、現状の仕様のままなら、edit関数内で無条件に解除すれば良いのかな？

ついでながら、ac関数の処理で値をreplaceで置き換えていますが、どうせクリアするのですから、直接、空白（=""）をセットしてしまった方が簡単です。

とは言うものの、もう少し処理の手順を練った方が宜しいかと。
ちょっと意地悪ですが、例えば、空欄の状態で、「.」「.」「6」「+」「3」「=」などの順で入力すると何もおこりません。
（まぁ、正しくない入力ではありますけれど・・・）

- 0
- 件

通報する

この回答へのお礼

お礼が遅くなり、申し訳ございません。
なんとかできました。ありがとうございました。

ご指摘の通り、拾ってきたサンプルは、なんとなく他と違うとは薄々感づいていました。
今はとりあえず、右も左も分からないので、「こうあって欲しい」というのを実現するにはどうするかを目標に色々調べて試しています。それが、電卓としておかしくても、「javascript」でどうやって実現するかを目的としているので、ご容赦願います^^;。
acのボタンもそうですね。おっしゃる通りです。たぶん、文字の置き換え（÷と×）がわかったので、そのまま流用したにすぎません。（その当時は""を知りませんでした。）

「.」や「+」が最初に押せるのもおかしいのですが、とりあえず「00」を押せなくするのと同じ原理だろうと（勝手に）思い、「00」が押せなくなってからその原理を流用しようと思っていました。

思われるところは多分にあると思います。
思われている以上に私は分かっていないと思います。
今後、ひとまず空欄の状態で、「.」「.」「6」「+」「3」が押せなくなるところまで行って、一旦電卓作成は終えようと思います。

色々もっとできるようになった時にまた電卓に帰ってきて、自分のダメさっぷりを偲べればいいなと思っています。

通報する

お礼日時：2021/01/27 16:30

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