Загадывание случайного числа vue

195

12 апреля 2022, 11:10

По клику на одну кнопку число загадывается, а по клику на вторую проверяется верно отгадано число или нет. В чём ошибка?

<div id="wrap">
    <button @click="getY">Загадать</button>     
    <div id="info">Загадано число до 100:</div>
    <input id="answer">
    <button id="send" @click="checkAnswer()">Ответить</button>
</div>
<script src="js/vue.js"></script>
<script>
    let yg=new Vue({
  el:"#wrap",
  data:{ 
   randomNum: 0
  },
  methods:{
      getY(){
        this.randomNum= Math.floor(Math.random() * 100) + 1;
        console.log(randomNum)
        
;},
checkAnswer(){
    var info;
    var answer = document.getElementById('answer');
    if( this.randomNum == answer ){
        info = 'Поздравляем! Вы угадали число!';
        
    }else if( this.randomNum < answer ){
        info = 'Ваше число меньше загаданного. Попробуйте еще раз!';
    }else {
        info = 'Ваше число больше загаданного. Попробуйте еще раз!';
    }
    document.getElementById('info').innerHTML += '<p>#' + ' Вы ответили: ' + answer.value + ' - ' + info + '</p>';
    console.log(this.randomNum)
}
}
})
</script>

Answer 1

Посмотрите реализацию по этой ссылке, она демонстрирует сам подход к решению проблемы, безусловно можно сделать чище и компактнее

Вы неправильно используете Vue, откажитесь от document.getElementById('info').innerHTML и других селекторов

В data поместим 3 переменные randomNum (число, генерируемое по клику на кнопку "Загадать"), answer (число, вносимое в input), response - ответ/подсказка

Для кнопки "Загадать" используем метод getY

Для кнопки "Ответить" используем метод checkAnswer

Подсказку/сообщение о том, что выбирающий угадал отображаем только если response !== '' (присваивание происходит в методе checkAnswer)

<template>
  <div id="app">
    <button @click="getY">Загадать</button>     
    <div id="info">Загадано число до 100:</div>
    <input v-model="answer" id="answer">
    <button @click="checkAnswer">Ответить</button>
    <div v-show="response !== ''">{{ response }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      randomNum: 0,
      answer: 0,
      response: ''
    };
  },
  methods: {
    getY(){
      let randNum = this.randomNum = Math.floor(Math.random() * 100) + 1;
      
      console.log(randNum)
      
      return randNum;
    },
    checkAnswer(){
      if( parseInt(this.answer) > parseInt(this.randomNum) ){
        this.response = 'Ваше число больше загаданного. Попробуйте еще раз!'
      }
      else if( parseInt(this.answer) < parseInt(this.randomNum) ){
        this.response = 'Ваше число меньше загаданного. Попробуйте еще раз!'
      }
      else {
        this.response = 'Поздравляем! Вы угадали число!'
      } 
    }
  }
};
</script>