javascriptで四則演算

締切済

質問者：ryusan-831
質問日時：2018/04/02 13:52
回答数：8件

javascriptで四則演算のページを作成したいのですがその際textboxに数字以外を入れるとエラーのダイアログボックスが出るようにしたいのですがどのようにしたらいいでしょうか？
ご教授お願いいたします

通報する

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

質問の本文を隠す

回答 (8件)

最新から表示
回答順に表示

No.8

回答者： babu_babu_baboo
回答日時：2018/04/06 21:12

type 属性に num なんてない！

/[a-z]|[A-Z]|[あ-ん]/　漢字は通すのか？

- 0
- 件

通報する

No.7

回答者： Kirito16.com
回答日時：2018/04/05 09:44

エラーログを出す方法でしたら、

var data = [フォームID];
if (data.match(/[0-9]/)) {
// 正しい処理
} else {
alert("数字を入力してね");
}

上記の方法でできますよ。
しかし、この方法だと数字(0～9のいずれか)が入っていればログはでないので、
少し工夫が必要です。

if (data.match(/[a-z]|[A-Z]|[あ-ん]/)) {

このようにすれば、数字以外の文字列がふくまれていたときに実行できます。

※ログを出さない方法でも良いのであれば、
input要素の属性で制限できます。

<input type="num">

type属性に"num"を指定することで、数字以外を入力できなくなります。

- 0
- 件

通報する

No.6

回答者： babu_babu_baboo
回答日時：2018/04/03 12:13

こんなのはダメでしょうね。

音声はイマイチでした。

<!DOCTYPE html>
<html lang="ja">
　<meta charset="UTF-8">
　<title>KeyPress ?</title>
　<style>
　　input {
　　　 text-align: right;
　　　 font-size: x-large;
　　　　}
　　　　　</style>
　　　　　　<form id="hoge">
　　　　　　 <p>
　　　　　　　 <input type="text" name="num0" value="0"><br>
　　　　　　　　 <input type="text" name="num1" value="0" id="a"><br>
　　　　　　　　 <input type="text" name="num2" value="0" class="b"><br>
　　　　　　　　
　　　　　　　　</form>
　　　　　　　　
　　　　　　　　<script>
　　　　　　　　{
　　　　　　　 const
　　　　　　 a = /^([0-9+-.])$/,
　　　　　　
　　　　　 b = (str) => {
　　　　 console.log (str);//alert (str);
　　　 let ssu = new SpeechSynthesisUtterance ();
　　　 ssu.lang = 'ja-JP';
　　 ssu.pitch = 6;
　 ssu.rate = 1;
　 ssu.text = 'ダメよぉ、ダメダメぇぇ。';
　 speechSynthesis.speak (ssu);
};

class hoge {
　
　 constructor (elements, reg_rule = a, worning_cbfunc = b) {
　 let es = [...elements];
　　
　　　 this.target = new Set (es);
　　　 this.rule = reg_rule;
　　　　 this.worning = worning_cbfunc;
　　　　　
　　　　　　 document.addEventListener ('keypress', this, false);
　　　　　　 }
　　　　　　　
　　　　　　　　
　　　　　　　　 handleEvent (event) {
　　　　　　　　 let {key, target} = event;
　　　　　　　　 if (this.target.has (target)) {
　　　　　　　　 if (! this.rule.test (key)) {
　　　　　　　　 this.worning (key);
　　　　　　　　 event.preventDefault();
　　　　　　　 }
　　　　　　 }
　　　　　　 }
　　　　　 }
　　　　 this.hoge = hoge;
　　　}
　　　
　　let es = document.querySelectorAll ('input[name="num0"], #a, .b');
　new hoge (es);
　
　</script>

- 1
- 件

通報する

この回答へのお礼

いえ中々面白いプログラムでした！参考になります

通報する

お礼日時：2018/04/03 15:09

No.5

回答者： Ogre7077
回答日時：2018/04/03 11:56

基本的には、

textbox の中身を数値に変換する関数を使い
https://developer.mozilla.org/ja/docs/Web/JavaSc …
https://developer.mozilla.org/ja/docs/Web/JavaSc …

結果が NaN (Not a Number) であるなら
https://developer.mozilla.org/ja/docs/Web/JavaSc …

警告のダイアログを出しましょう
https://developer.mozilla.org/ja/docs/Web/API/Wi …

応用として、

他の回答に挙げられている HTML のフォーム検証機能を併用してみましょう。
https://developer.mozilla.org/ja/docs/Learn/HTML …

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！サイトみながらやってみます

通報する

お礼日時：2018/04/03 15:10

No.4

回答者： yambejp
回答日時：2018/04/02 18:53

#3さん

そういう意味ではnumberでもバリデートの抜けはあります
ユーザー入力の何処までをエラーにしたいか次第で
patternなりスクリプト処理を拡張すればいいでしょう

- 1
- 件

通報する

No.3

回答者： babu_babu_baboo
回答日時：2018/04/02 16:27

No2様の回答の正規表現だとマイナス記号だとか、小数点が入らないので注意ですよ。

- 0
- 件

通報する

No.2

回答者： yambejp
回答日時：2018/04/02 15:30

いくつか処理方法はあります

すでに回答のあるnumber以外であれば

<input type="text" pattern="^[0-9]+$">
とするとか

<input type="text" oninput="if(this.value.match(/[^0-9]/)){this.value=this.value.replace(/[^0-9]/,'')}">
とするとか

- 1
- 件

通報する

No.1

回答者： fujillin
回答日時：2018/04/02 14:51

こんにちは

最近のブラウザ対象で良ければ、HTML側で
　<input type="number" >
を利用することで、数値の入力に限定できます。
https://developer.mozilla.org/ja/docs/Web/HTML/E …

javascript側で判断するには、計算処理を行う前に、入力値が数値かどうかをチェックすれば宜しいかと
https://developer.mozilla.org/ja/docs/Web/JavaSc …