質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.13%

数値入力

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 691

ajgd261

score 10

前提・実現したいこと

数当てゲームを作っています。

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

<!DOCTYPE html>
<html lang="ja">
  <head>
     <meta charset="utf8">
     <title>数当て</title>
     </head>
     <body>
     <p>
                選んだ数字(0~99):<input id="1" type="text" size="3"></input>
                <button id="2">挑戦</button><br>
                コンピュータの回答:<b><span id="3">??</span></b><br>
                コンピュータの回答はあなたが選んだ数字より大きいですか?小さいですか?
                <button id="4" value="big">大きい</button><button id="5" value="small">小さい</button><br><br>
                <span id="6">??</span>回目で正解です。
                <script src="kazuate.js"></script>
     </body>
</html>
var suzi = document.getElementById('1');
var kazuate = document.getElementById('2');
var kaitou = document.getElementById('3'); 
var ookii = document.getElementById('4'); 
var tiisai = document.getElementById('5'); 
var kaisuu = document.getElementById('6'); 
var ans1= Math.round(Math.random()*100)+0; //コンピュータがランダムで2桁の回答を作成
var turn = 0;  //答えた回数を保持する変数
var ans2 = parseint(suzi.value);  //プレイヤーが入力した答え
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++;//回数を増やす
   }

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

追記:

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

var suzi = document.getElementById('1');
var kazuate = document.getElementById('2');
var kaitou = document.getElementById('3'); 
var ookii = document.getElementById('4'); 
var tiisai = document.getElementById('5'); 
var kaisuu = document.getElementById('6'); 
var ans1= Math.floor(Math.random()*100)+0; //コンピュータがランダムで2桁の回答を作成
var turn = 0;  //答えた回収を保持する変数
 var ans2 = parseInt(suzi.value);  //プレイヤーが入力した答え

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

 tiisai.addEventListener('click', function () { //小さいをクリックした場合
   turn++;
   if(ans2 > ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より小さかったら
    ans1=Math.floor(Math.random()*((99+1)- ans1)) +ans1; 
    //追加項目 最大値を99、最小値をans1と指定?
    kaitou.textContent = ans1;  //より大きい数字の表示
    kakunin();
   }
   });

    ookii.addEventListener('click', function () { //大さいをクリックした場合
   turn++;
   if(ans2 < ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より大きかったら
       ans1=Math.floor(Math.random()*((ans1+1)- 0)) +0; 
       //追加項目 最大値を((ans1+1)- 0))、最小値を0と指定??
       kaitou.textContent = ans1;  //「コンピュータの回答:」欄により大きい数字の表示 
       kakunin();
   }
   });


変更点は、
最初は、

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


だったのを、

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


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

var ans2 = parseint(suzi.value);
ではなく
var ans2 = parseInt(suzi.value);
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++;//回数を増やす
   }


カッコがおかしい

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)
にしないと比較ではなく上書きになります。

 追記

var ans2 = parseInt(suzi.value);


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

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

追記

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

〜省略〜

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


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

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

 ソース追記

var suzi = document.getElementById('1');
var kazuate = document.getElementById('2');
var kaitou = document.getElementById('3'); 
var ookii = document.getElementById('4'); 
var tiisai = document.getElementById('5'); 
var kaisuu = document.getElementById('6'); 
var ans1= Math.round(Math.random()*100)+0; //コンピュータがランダムで2桁の回答を作成
var turn = 0;  //答えた回数を保持する変数
var ans2 = parseInt(suzi.value);  //プレイヤーが入力した答え

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

kazuate.addEventListener('click', function () {  //挑戦をクリックした場合
    turn++;
    ans2 = parseInt(suzi.value);
    kaitou.textContent = ans1; //「コンピュータの回答:」欄の横にコンピュータの回答を表示
    kakunin();
});

tiisai.addEventListener('click', function () { //小さいをクリックした場合
    turn++;
    if(ans2 > ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より小さかったら=
        ans1 = Math.floor( Math.random() * (100-ans1 + 1) ) + ans1 + 1 ;
        kaitou.textContent = ans1;  //「コンピュータの回答:」欄により小さな数字の表示
        kakunin();
    }
});

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/06 21:20

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

    キャンセル

  • 2016/11/06 21:23

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

    キャンセル

  • 2016/11/06 22:29

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる