Переменные undefined и события onclick / onkeydown, работающие вместе - PullRequest
Новая
       30

Переменные undefined и события onclick / onkeydown, работающие вместе

0 голосов
/ 26 сентября 2018

Я спрашиваю только здесь, потому что я чувствую, что независимо от того, что я смотрю, я не получаю ответа на свои вопросы.Кроме того, мой профессор почти не знает материала и не отправляет по электронной почте назад или не появляется в его офисе.Он не помогает ни одному из студентов, поэтому мне нужна помощь, пожалуйста!

Мы должны написать код JavaScript, который будет отображать случайно сгенерированное математическое уравнение при загрузке страницы.Затем пользователь вводит свой ответ и либо нажимает клавишу ввода, либо нажимает кнопку отправки.Затем я должен сравнить общее количество сгенерированного случайного числа и ответа пользователя и распечатать определенный текст для правильного или неправильного.Если пользователь понял это правильно, задержка составляет 5 секунд, а затем необходимо отобразить новое уравнение.

Учитывая все сказанное, моя проблема сейчас заключается в том, что мои переменные продолжают отображаться как неопределенные.Я создаю случайное уравнение при загрузке экрана, но если я пытаюсь передать результат в новую функцию для сравнения, я просто получаю неопределенное снова и снова.Именно здесь мой учитель не научил нас ничего о области видимости или коде, который затрагивает только одну функцию.Я чувствую, что попробовал все, что мне известно, а также то, что я искал в Интернете.Есть идеи, что я делаю не так?Или какая-нибудь помощь, чтобы просто научить меня знать, когда вам нужно несколько функций и переменная область видимости?TIA 

window.onload = display();

function display() {
    var max = 10;
    var random1 = Math.floor((Math.random() * Math.floor(max)));
    var random2 = Math.floor((Math.random() * Math.floor(max)));
    var total = random1 + random2;
    //console test
    console.log(random1);
    console.log(random2);
    document.getElementById('output').innerHTML = random1 + ' + ' + random2 + " = ";
    compare(total); //I don't want this because then it doesn't wait for the onclick or the onkeydown events to happen before comparing.
}

function checkKey() {
    if (event.keyCode == 13) {
        compare();
    }
}

function compare(total) {
    var answer = document.getElementById('userAnswer').value;
    console.log(answer);
    console.log(total);
//    if (answer === total) {
//        document.getElementById('wrongRight').innerHTML = "Correct! A new equation will display shortly.";
//    } else {
//        document.getElementById('wrongRight').innerHTML = "Incorrect, Please try again";
//    }
}

А вот мой HTML, чтобы вы могли видеть, к каким элементам я обращаюсь.У меня сейчас нет CSS. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multiplication</title>
    <script src="math.js" defer></script>
</head>
<body>
   <h2>Below is a randomly generated equation. Please enter your answer</h2>

   <p id="output">testing field for equation</p>
   <input type="text" id="userAnswer" onkeydown="checkKey()" autofocus>
   <button id="submitAnswer" onclick="compare()">Submit Answer</button>

</body>
</html>

Здесь также приведены его требования к заданию, если вы не понимаете, куда я иду или что необходимо.Это класс javascript для начинающих, и, как я уже сказал, он даже не знает синтаксиса и должен постоянно что-то искать.

  1. Напишите программу, которая поможет учащимся научиться умножению.Используйте Math.random, чтобы получить два положительных однозначных целых числа и отобразить вопрос в HTML-документе.Затем студент наберет ответ в текстовом поле формы (не во всплывающем окне) и получит ответ, говорящий что-то вроде «Хорошо!»или "Нет. Пожалуйста, попробуйте еще раз".Создайте как минимум 2 варианта отрицательных ответов, чтобы ученик получил некоторые варианты.Как только студент получит правильный ответ, он должен получить новый вопрос.Посмотрите эту заставку, чтобы увидеть, как она должна функционировать: http://screencast.com/t/BuF7iNtrL (Ссылки на внешний сайт.) Ссылки на внешний сайт.Другие вещи, которые должны работать:

  2. Поле ввода должно получать фокус при загрузке страницы.

  3. Сообщение, связанное с неправильным ответом, должно отображаться красным.
  4. Сообщение, связанное с правильным ответом, должно отображаться зеленым цветом.
  5. Пользователь должен иметь возможность отправить ответ, нажав кнопку отправки или нажав клавишу возврата.
  6. Должна быть трехсекундная пауза после отображения зеленого сообщения и перед отображением нового уравнения.

И не поможет, если все, что вы собираетесь делать, это ненавидеть.Я новичок и очень хочу хорошо разбираться в JavaScript, поэтому мне нужно задавать вопросы.

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Я бы начал с разделения вашей логики немного дальше.

Мы могли бы захотеть легко выполнить следующие действия:

Создать уравнение (и получить ответ) 

function generateEquation(){
  const max = 10;
  const random1 = Math.floor((Math.random() * Math.floor(max)));
  const random2 = Math.floor((Math.random() * Math.floor(max)));
  return {
    equation: random1 + ' + ' + random2 + ' = ',
    solution: random1 + random2,
  }
}

console.log(generateEquation());

Получить ответ пользователя 

function getUserAnswer() {
  return document.getElementById('userAnswer').value;
}

document.getElementById('testbtn').addEventListener('click', function() {
  console.log(getUserAnswer());
});

setTimeout(() => {
  console.log(getUserAnswer());
}, 2500);
<input type="text" id="userAnswer">
<div id="testbtn">Submit</div>

Отображение содержимого 

function render(content){
  document.getElementById('content').innerHTML = content;
}

document.getElementById('render').addEventListener('click', function(){
  render('do logic to determine content');
});
<div id="render">Re Render</div>
<div id="content"></div>

Теперь сложим это вместе: 

let equation;

render();

function generateEquation() {
  const max = 10;
  const random1 = Math.floor((Math.random() * Math.floor(max)));
  const random2 = Math.floor((Math.random() * Math.floor(max)));
  return {
    equation: random1 + ' + ' + random2 + ' = ',
    solution: random1 + random2,
  }
}

function getUserAnswer() {
  return document.getElementById('userAnswer').value;
}

function compare(x, y) {
  if (x == y) {
    console.log('correct');
    render();
  } else {
    console.log('incorrect');
    // ...  
  }
}

document.getElementById('submit').addEventListener('click', function() {
  compare(equationObj.solution, getUserAnswer())
});

function render() {
  equationObj = generateEquation();
  document.getElementById('equation').innerHTML = equationObj.equation;
}
<input type="text" id="userAnswer">
<div id="submit">Submit</div>
<div id="equation"></div>

Я оставлю вам CSS =)

0 голосов
/ 26 сентября 2018

Итак, проблема, с которой вы сталкиваетесь, заключается в том, что var total относится к функции, в которой оно определено. ( Подробнее о var scoping. ) Чтобы исправить, вам просто нужно сделатьtotal быть глобально доступным: 

window.onload = display();
var total;

function display() {
    var max = 10;
    var random1 = Math.floor((Math.random() * max));
    var random2 = Math.floor((Math.random() * max));
    total = random1 + random2;
    document.getElementById('output').innerHTML = random1 + ' + ' + random2 + " = ";
}

function checkKey() {
    if (event.keyCode === 13) {
        compare();
    }
}

function compare(total) {
    var answer = document.getElementById('userAnswer').value;

    if (answer === total) {
        document.getElementById('wrongRight').innerHTML = "Correct! A new equation will display shortly.";
    } else {
        document.getElementById('wrongRight').innerHTML = "Incorrect, Please try again";
    }
}

Кроме того, маленькая гнида: Math.floor(10) равна 10, поэтому нет причин делать Math.floor вокруг max.

...