数字当てゲームの作成

Question

前提・実現したいこと

コンピューターがランダムで生成した2つの数字を当てるゲームを作成したいです。

ユーザーが数字を入力し、その数字が0から9の半角数字ならボタン押せるようにします。

ボタンを押すと、
１、ユーザーが入力した数字
２、コンピューターが生成した数字
３、結果
上記の3つが表示されます。

発生している問題・エラーメッセージ

「チェック」 ボタンを押しても反応しません。

関数check1は機能しているのですが、数字を入力して「チェック」 ボタンを有効にし、「チェック」 ボタンを押しても関数clickが動いていないようです。

エラーも出ないので、原因のヒントをいただきたいです。

該当のソースコード

<form>
  <input type="text" id="number1" value="" onblur="check1()"><br>
  <input type="text" id="number2" value="" onblur="check1()"><br>
  <p id="error1"></p><br>
  <input type="button"  id="btn" value="チェック" onclick="click()"><br><br>
</form>


USER :[<span id="user1">&emsp;&emsp;&emsp;</span>] [<span id="user2">&emsp;&emsp;&emsp;</span>]

<br>
<br>
COM : [<span id="com1">&emsp;&emsp;&emsp;</span>] [<span id="com2">&emsp;&emsp;&emsp;</span>]

<p id="result"></p> 



var btn = document.getElementById('btn');
btn.disabled = true;

function check1(){
  var btn = document.getElementById("btn");
  var number1 = document.getElementById("number1").value;
  var number2 = document.getElementById("number2").value;
  if(number1.match(/^[0-9]{1}$/) && number2.match(/^[0-9]{1}$/)){
    btn.disabled = false;
    error1.innerHTML = ' '
  }else if(!number1.match(/^[0-9]{1}$/) || !number2.match(/^[0-9]{1}$/)){
    error1.innerHTML = '0から9の半角数字を2つ入力してください'
  }
}


function click(){

  var number1 = document.getElementById("number1").value;
  var number2 = document.getElementById("number2").value;

  var user1 = document.getElementById("user1");
  var user2 = document.getElementById("user2");

  var com1 = document.getElementById("com1");
  var com2 = document.getElementById("com2");

  var result = document.getElementById('result');

  var random1 = Math.floor( Math.random() * 11);
  var random2 = Math.floor( Math.random() * 11);
  
  user1.innerHTML = number1;
  user2.innerHTML = number2;
  com1.innerHTML = random1;
  com2.innerHTML = random2;
  
  if(number1 === random1 && number2 === random2){
    result.innerHTML = "当たり";}
  else if(number1 === random2 && number2 === random1) {
    result.innerHTML="前後賞";
  }else{
    result.innerHTML="はずれ";
  }
}

Answer 1

onclick="click()" を onclick="window.click()" にしてみてください

Comments

[退会済みユーザー]

ありがとうございます。

無事、動きました。

恐れ入りますが、なぜwindowを付けたら動いたのか教えていただくことは可能でしょうか？

javascript window　や
javascript window.onclick　などで検索しても該当するようなページを発見できませんでした。

[退会済みユーザー]

window.click の間違いです。

[lazex]

`onclick=""` の中で参照する `click` はグローバルに作成した click 関数を参照していないからです。
click ではなく click1 という名前にすれば window をつけなくてもグローバルの click1 を参照できます。

[lazex]

click が何を参照してるかを補足すると、 button 要素の click プロパティに入ってる関数です。
onclick に限らず onxxx="" の中に書く js ではその要素のプロパティを参照できてしまいます。
なので click みたいに名前がかぶるとグローバルに定義した関数を参照できなくなります。
参考までに以下のコードで 100 が alert で表示されます。

<button id="b" onclick="alert(x)">button</button>
<script>
const button = document.getElementById("b")
button.x = 100
</script>

[退会済みユーザー]

ご丁寧にありがとうございます。

理解できるまでしっかり読み返させていただきます。