数値入力

###前提・実現したいこと
数当てゲームを作っています。

コードは以下の通りです。

html
1
2<!DOCTYPE html>
3<html lang="ja">
4  <head>
5     <meta charset="utf8">
6     <title>数当て</title>
7     </head>
8     <body>
9     <p>
10				選んだ数字（0～99）：<input id="1" type="text" size="3"></input>
11				<button id="2">挑戦</button><br>
12				コンピュータの回答：<b><span id="3">？？</span></b><br>
13				コンピュータの回答はあなたが選んだ数字より大きいですか？小さいですか？
14				<button id="4" value="big">大きい</button><button id="5" value="small">小さい</button><br><br>
15				<span id="6">？？</span>回目で正解です。
16				<script src="kazuate.js"></script>
17     </body>
18</html>
19

javascript
1var suzi = document.getElementById('1');
2var kazuate = document.getElementById('2');
3var kaitou = document.getElementById('3'); 
4var ookii = document.getElementById('4'); 
5var tiisai = document.getElementById('5'); 
6var kaisuu = document.getElementById('6'); 
7var ans1= Math.round(Math.random()*100)+0; //コンピュータがランダムで2桁の回答を作成
8var turn = 0;  //答えた回数を保持する変数
9var ans2 = parseint(suzi.value);  //プレイヤーが入力した答え
10kazuate.addEventListener('click', function () {  //挑戦をクリックした場合
11  if(ans2 = ans1){ //もしプレイヤーが入力した数値とコンピュータが出した答えが一緒なら
12    kaitou.textContent = ans1; //「コンピュータの回答：」欄の横にコンピュータの回答を表示
13  	kaisuu.textContent = turn;  //「：回目で正解です」欄に回数を表示
14   }
15   }
16 tiisai.addEventListener('click', function () { //小さいをクリックした場合
17   if(ans2 > ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より小さかったら
18  	kaitou.textContent = ans1;  //「コンピュータの回答：」欄により小さな数字の表示
19   }
20   turn++;//回数をふやす
21   }
22    ookii.addEventListener('click', function () { //大きいをクリックした場合
23   if(ans2 < ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より大きかったら
24  	kaitou.textContent = ans1;  //「コンピュータの回答：」欄により大きな数字の表示 
25   }
26     turn++;//回数を増やす
27   }

このようにプログラムを考えてみたのですが、全く動きません。
また、コンピュータが選んだ数字がもっと大きい（小さい）場合に、より大きな（小さな)数値を表示するところはさっぱりわかりませんでした。
kaitou.textContent = ans1; //「コンピュータの回答：」欄により小さな数字の表示
kaitou.textContent = ans1; //「コンピュータの回答：」欄により大きな数字の表示
のところです。
一応、各コードになぜこのように書いたか説明しました。
今回実現したいことが分かる方がいらっしゃいましたら、ご教示お願いします。

追記：

丁寧な回答ありがとうございます。
それらの回答に基づいて編集してみました。

javascript
1var suzi = document.getElementById('1');
2var kazuate = document.getElementById('2');
3var kaitou = document.getElementById('3'); 
4var ookii = document.getElementById('4'); 
5var tiisai = document.getElementById('5'); 
6var kaisuu = document.getElementById('6'); 
7var ans1= Math.floor(Math.random()*100)+0; //コンピュータがランダムで2桁の回答を作成
8var turn = 0;  //答えた回収を保持する変数
9 var ans2 = parseInt(suzi.value);  //プレイヤーが入力した答え
10 
11 function kakunin(){
12  if(ans2 == ans1){ //もしプレイヤーが入力した数値とコンピュータが出した答えが一緒なら
13      kaitou.textContent = ans1; //「コンピュータの回答：」欄にコンピュータの回答を表示
14      kaisuu.textContent = turn;  //「：回目で正解です」欄に回数を表示
15   }
16}
17   
18 tiisai.addEventListener('click', function () { //小さいをクリックした場合
19   turn++;
20   if(ans2 > ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より小さかったら
21    ans1=Math.floor(Math.random()*((99+1)- ans1)) +ans1; 
22    //追加項目 最大値を99、最小値をans1と指定？
23    kaitou.textContent = ans1;  //より大きい数字の表示
24    kakunin();
25   }
26   });
27   
28    ookii.addEventListener('click', function () { //大さいをクリックした場合
29   turn++;
30   if(ans2 < ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より大きかったら
31  	 ans1=Math.floor(Math.random()*((ans1+1)- 0)) +0; 
32  	 //追加項目 最大値を((ans1+1)- 0))、最小値を０と指定？？
33  	 kaitou.textContent = ans1;  //「コンピュータの回答：」欄により大きい数字の表示 
34  	 kakunin();
35   }
36   });
37
38

変更点は、
最初は、

javascript
1kazuate.addEventListener('click', function () {  //挑戦をクリックした場合
2  if(ans2 = ans1){ //もしプレイヤーが入力した数値とコンピュータが出した答えが一緒なら
3    kaitou.textContent = ans1; //「コンピュータの回答：」欄の横にコンピュータの回答を表示
4      kaisuu.textContent = turn;  //「：回目で正解です」欄に回数を表示
5   }
6   }

だったのを、

javascript
1 function kakunin(){
2  if(ans2 == ans1){ //もしプレイヤーが入力した数値とコンピュータが出した答えが一緒なら
3      kaitou.textContent = ans1; //「コンピュータの回答：」欄にコンピュータの回答を表示
4      kaisuu.textContent = turn;  //「：回目で正解です」欄に回数を表示
5   }
6}

に変えました。
また、turn++の位置をあげ、
もしコンピュータが出した答えがプレイヤーが入力した数値より小さかったら
ans1=Math.floor(Math.random()((99+1)- ans1)) +ans1;
もしコンピュータが出した答えがプレイヤーが入力した数値よりおおきかったら
ans1=Math.floor(Math.random()((ans1+1)- 0)) +0;
としました。
どうしても分からなかったのが、おっしゃていた
var ans2 = parseInt(suzi.value);
をどの位置にやるのかです。

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

回答1件

ベストアンサー

まず動かない、というのは文法的におかしなところがあるからですが、

javascript
1var ans2 = parseint(suzi.value);
2ではなく
3var ans2 = parseInt(suzi.value);

javascript
1kazuate.addEventListener('click', function () {  //挑戦をクリックした場合
2  if(ans2 = ans1){ //もしプレイヤーが入力した数値とコンピュータが出した答えが一緒なら
3    kaitou.textContent = ans1; //「コンピュータの回答：」欄の横にコンピュータの回答を表示
4      kaisuu.textContent = turn;  //「：回目で正解です」欄に回数を表示
5   }
6   }
7 tiisai.addEventListener('click', function () { //小さいをクリックした場合
8   if(ans2 > ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より小さかったら
9      kaitou.textContent = ans1;  //「コンピュータの回答：」欄により小さな数字の表示
10   }
11   turn++;//回数をふやす
12   }
13    ookii.addEventListener('click', function () { //大きいをクリックした場合
14   if(ans2 < ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より大きかったら
15      kaitou.textContent = ans1;  //「コンピュータの回答：」欄により大きな数字の表示 
16   }
17     turn++;//回数を増やす
18   }

カッコがおかしい

kazuate.addEventListener('click', function () {  //挑戦をクリックした場合
  if(ans2 = ans1){ //もしプレイヤーが入力した数値とコンピュータが出した答えが一緒なら
    kaitou.textContent = ans1; //「コンピュータの回答：」欄の横にコンピュータの回答を表示
      kaisuu.textContent = turn;  //「：回目で正解です」欄に回数を表示
   }
});

 tiisai.addEventListener('click', function () { //小さいをクリックした場合
   if(ans2 > ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より小さかったら
      kaitou.textContent = ans1;  //「コンピュータの回答：」欄により小さな数字の表示
   }
   turn++;//回数をふやす
   });
ookii.addEventListener('click', function () { //大きいをクリックした場合
   if(ans2 < ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より大きかったら
      kaitou.textContent = ans1;  //「コンピュータの回答：」欄により大きな数字の表示 
   }
     turn++;//回数を増やす
   });

です。動作内容まではチェックしてません。

if(ans2 = ans1)
は
if(ans2 == ans1)
にしないと比較ではなく上書きになります。

###　追記

javascript
1var ans2 = parseInt(suzi.value);

の書く場所ですが、この場所ではkazuate.jsが読み込まれたらすぐ実行されるので、まだユーザーが数値を入力していない段階での処理になりans2は期待するものにはなりません。

あとはロジック部分もみましたがこれでは想定されている動作はできません。、それぞれのボタンをクリックした時に何をするかを日本語レベルでいいのではっきりさせてそれに忠実にコーディングすると良いと思います。

###追記

javascript
1function kakunin()
2{
3  if(ans2 == ans1){ //もしプレイヤーが入力した数値とコンピュータが出した答えが一緒なら
4      kaisuu.textContent = turn;  //「：回目で正解です」欄に回数を表示
5   }
6}
7
8〜省略〜
9
10ookii.addEventListener('click', function () { //大きいをクリックした場合
11    turn++;
12    if(ans2 < ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より大きかったら
13        ans1 = Math.floor( Math.random() * ans1 );
14        kaitou.textContent = ans1;  //「コンピュータの回答：」欄により大きな数字の表示 
15        kakunin();
16    }
17});

とりあえず、一部だけ。。。

ただし実際にはユーザーが想定しない操作をした時にどうするかも考えてコーディングしないといけません。

ソース追記

javascript
1var suzi = document.getElementById('1');
2var kazuate = document.getElementById('2');
3var kaitou = document.getElementById('3'); 
4var ookii = document.getElementById('4'); 
5var tiisai = document.getElementById('5'); 
6var kaisuu = document.getElementById('6'); 
7var ans1= Math.round(Math.random()*100)+0; //コンピュータがランダムで2桁の回答を作成
8var turn = 0;  //答えた回数を保持する変数
9var ans2 = parseInt(suzi.value);  //プレイヤーが入力した答え
10
11function kakunin()
12{
13  if(ans2 == ans1){ //もしプレイヤーが入力した数値とコンピュータが出した答えが一緒なら
14      kaisuu.textContent = turn;  //「：回目で正解です」欄に回数を表示
15   }
16}
17
18kazuate.addEventListener('click', function () {  //挑戦をクリックした場合
19    turn++;
20    ans2 = parseInt(suzi.value);
21    kaitou.textContent = ans1; //「コンピュータの回答：」欄の横にコンピュータの回答を表示
22    kakunin();
23});
24
25tiisai.addEventListener('click', function () { //小さいをクリックした場合
26    turn++;
27    if(ans2 > ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より小さかったら=
28        ans1 = Math.floor( Math.random() * (100-ans1 + 1) ) + ans1 + 1 ;
29        kaitou.textContent = ans1;  //「コンピュータの回答：」欄により小さな数字の表示
30        kakunin();
31    }
32});
33
34ookii.addEventListener('click', function () { //大きいをクリックした場合
35    turn++;
36    if(ans2 < ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より大きかったら
37        ans1 = Math.floor( Math.random() * ans1 );
38        kaitou.textContent = ans1;  //「コンピュータの回答：」欄により大きな数字の表示 
39        kakunin();
40    }
41});

投稿2016/11/06 09:25

編集2016/11/06 12:22

hiim

総合スコア1689

ajgd261

2016/11/06 09:45

ご回答ありがとうございます。実践してみましたが、2つ問題が発生しています。１つ目は、質問の方にも書かさせてもらいましたが、 kaitou.textContent = ans1; //「コンピュータの回答：」欄により小さな数字の表示 kaitou.textContent = ans1; //「コンピュータの回答：」欄により大きな数字の表示の部分で、コンピュータが選んだ数字がもっと大きい（小さい）場合に、大きい（小さい）ボタンを押すと書きましたが、1回目に選んだ数字より大きな（小さな)数値を表示するところはさっぱりわかりませんでした。 2つ目は、回数の表示のところです。どうしても回数が正しく表示されません。もしわかりましたら、ご教示お願いします。

hiim

2016/11/06 10:03 編集

> 1回目に選んだ数字より大きな（小さな)数値を表示するところはさっぱりわかりませんでした。は if(ans2 < ans1)の時もう一度、ans1を再度生成しないといけません。 ans1 = Math.floor( Math.random() * (ans1 + 1) ); のように0〜ans2の範囲で、逆もにたようなものです。そして回数のほうはこのソースでは正解した時に表示されますが、先ほども書きましたが、各ボタンをおされたら何をするかを日本語レベルでいいので明確にしてみてください。そうすればおのずと回答に近づくとおもいます。

ajgd261

2016/11/06 11:52

ご回答本当にありがとうございます。追記に示したように変更してみたんですが、結果的には動かなくなってしまいました。どこを直せば良いかも分からなくなってしまいました。度々申し訳無いですが、もし、よろしければ、ご教示お願いします。

hiim

2016/11/06 12:20

うごかなくなったソース追記できますか？

hiim

2016/11/06 12:23

質問に掲載された方法での動くソースにしたもの追記しておきました、一応動作はすると思いますが、ツッコミどころというか穴はたくさんあるソースですが、一応動くと思います。

ajgd261

2016/11/06 13:29

この度は、本当にありがとうございました。