JavaScript 同じフォーム・ボタンを繰り返し出力したい

【やっている事】
問い合わせフォームを作成しています。
数字を入れて送信を押せば何も表示しない。
数字以外を出力すると、画面上に「数字以外入力しないでください。」と注意文を出しています。

【実現したいこと】
「数字以外入力しないでください。」と注意文を出したあと、
フォームに数字を入力→送信ボタンを押すと注意文が消えるようにしたいのですが、うまく実現しません。

【条件】
表示する前に一度「初期化」を行って、実現したいです。

【つまづいているところ】
初期化→再度フォームに入力→送信するためには
まず送信ボタンを押すと同じ処理が繰り返される＝クリック操作で何度も問い合わせフォームとボタンが出てくる、
のあとに初期化のコードをはさみたいです。
が、一つのクリックから同じ要素が出てくるコードがいまいちわかりません。

書いてみたコード

___html__
<!DOCTYPE html>
<html>
  <head>
    <title>問い合わせフォーム</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <label for="tentacles"></label>
    <input type="text" id="number" name="number">
    <button type="button" value="check" onclick="check();">判定</button>
    <div id="innerHTMLtxt"></div>
    
    <script type="text/javascript" src="../js/test.js"></script>
  </body>
</html>

__JavaScript__
var check = function() {
  var num = document.getElementById("namber").value;
  if(!isNaN(num)){
    return true;
    
  } else {
   innerHTMLtxt.innerHTML="数字以外入力しないでください。";
   document.getElementById("innerHTMLtxt").style.color = "red";
  }

  num.innerHTML = "";

}

ご教授頂けると幸いです。
よろしくお願いします。

m.ts10806

2021/05/27 23:50

コードはマークダウンのcode機能にてご提示くださいあと細かいですが英単語としたいなら namber→number

hichu

2021/05/28 00:12

ご指摘ありがとうございます。今後は気を付けます。

m.ts10806

2021/05/28 00:13

質問は編集できますのでこの質問からしましょう。特にマークダウンのcodeは対応必須です。なぜかというところは他の質問や回答も参考にしてください。

hichu

2021/05/28 10:01

確かに次回からではなく今回からするべきでした！マークダウンのcode機能を利用と、numberの文字を編集いたしました。ご指摘ありがとうございます。もしまた何か気になる点あればお手間と思いますが教えてください。

行動規範の内容に同意します

回答2件

ベストアンサー

こういうことでしょうか？

JavaScript
1var check = function() {
2var num = document.getElementById("namber").value;
3    if(!isNaN(num)) {
4    innerHTMLtxt.innerHTML="";
5    return true;
6    } else {
7        innerHTMLtxt.innerHTML="数字以外入力しないでください。";
8        document.getElementById("innerHTMLtxt").style.color = "red";
9    }
10}

投稿2021/05/27 17:21

退会済みユーザー

総合スコア0

hichu

2021/05/28 10:03

まさにこれです！！こんなにシンプルな事だったのですね・・。遅い時間だったにも関わらずお答えいただきありがとうございました！

行動規範の内容に同意します

javascript
1<script>
2document.addEventListener('input',e=>{
3  const t=e.target;
4  const flg=t.pattern && !RegExp(`^${t.pattern}$`).test(t.value);
5  document.querySelector('#err').textContent=flg?"ng":"ok";
6});
7</script>
8<form>
9<input id="number"  pattern="[0-9]+">
10<button type="submit">判定</button>
11<div id="err"></div>
12</form>