Как повторить процесс, вызвав функцию в JavaScript - PullRequest
Новая
       25

Как повторить процесс, вызвав функцию в JavaScript

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

Я недавно предложил эту простую функцию в предыдущем посте, используя функцию prompt () для получения пользовательских данных.С тех пор я поднялся, чтобы использовать ввод HTML-форм для достижения аналогичного результата.Я не могу обновить уравнение.Я не уверен, что я делаю неправильно.Просто ...

-Случайное генерирование двух чисел между 1-10 ... работает только один раз

-Пользователь вводит ответ и сравнивает ... Работы

-Всего ответов и правильных ответов ... Работы

-Предоставление оценки номера ... Работы

Математическое поколение getMath () не перезапускается в конце «result ()», и я не уверен, почему.

Пожалуйста, не стесняйтесь побить меня синтаксисом.

В дальнейшем я буду добавлять цифры и изменять операцию, чтобы постепенно увеличивать уровень сложности.Но по одному шагу за раз.

Заранее благодарим вас за ваше время и понимание. 

var correct = 0,
  wrong = 0,
  ans,
  firstnum = Math.floor(Math.random() * 10 + 1),
  secondnum = Math.floor(Math.random() * 10 + 1),
  total = firstnum + secondnum,
  score,
  input,
  calc = "+";

function getMath() {

  document.getElementById("firstnum").value = firstnum;
  document.getElementById("secondnum").value = secondnum;
  document.getElementById("calc").value = calc;
}

function getAnswer() {

  var input = document.getElementById("userInput").value;
  if (input == total) {
    correct++;
  } else {
    wrong++;
  }
  result();
}


function result() {

  score = correct + wrong;
  percent = correct / score;
  document.getElementById("score").innerHTML = score;
  document.getElementById("ans").innerHTML = correct;
  document.getElementById("percent").innerHTML = percent * 100;
  getMath();
}
<body onload="getMath()">

  <h1>Math Test</h1>

  <input type="text" id="firstnum"></input>
  <input type="text" id="calc">
  <input type="text" id="secondnum">
  <hr>

  <form id="form1" onsubmit="return false">
    <input type="text" id="userInput" placeholder="" size="10">
    <button onclick="getAnswer()">Submit Answer</button>
  </form>

  <p>Total Answered</p>
  <p id="score"></p>
  <p>Answered Correctly</p>
  <p id="ans"></p>
  <p>Your number grade</p>
  <p id="percent">%</p>

</body>

</html>

Ответы [ 2 ]

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

Причина, по которой вы не получили второй раунд чисел, заключается в том, что код, который генерирует случайные числа, не был внутри функции getMath() .Код случайного числа запускался только один раз при первой загрузке страницы.

Теперь, кроме этого, у вас есть много избыточного / ненужного кода (т. Е. Нет необходимости отслеживать, сколько неправильных ответов, какПока мы знаем, сколько вопросов было задано и сколько вы получили правильных), а также многие из ваших переменных имеют имена, которые не точно выражают то, что они содержат.

Очистка всего этого, уменьшает количествокод и его сложность.

См. Встроенные комментарии о внесенных изменениях: 

// Do all your event binding in JavaScript, not with inline HTML event attributes:
window.addEventListener("DOMContentLoaded", populate);
document.querySelector("button").addEventListener("click", result);

// Declare and initialize all your variables.
var correct = 0;
var numQuestions = null;
var total = null;
var calc = "+";

// Get your DOM references just once and set your variable
// to the element itself, not a property of the element so 
// that if you ever want to get a different property, you
// already have the DOM reference.
var firstNumElement = document.getElementById("firstnum");
var secondNumElement = document.getElementById("secondnum");
var calcElement = document.getElementById("calc");
var input = document.getElementById("userInput")
var numCorrectElement = document.getElementById("score");
var numQuestionsElement =  document.getElementById("ans");
var percentElement = document.getElementById("percent");

function populate() {
  // You need to generate new randoms after each successful guess
  // so these lines need to be in a function that will be called again 
  firstNumElement.textContent = Math.floor(Math.random() * 10 + 1);
  secondNumElement.textContent = Math.floor(Math.random() * 10 + 1);
  calcElement.textContent = calc;
  // prepending a "+" in front of the textContent converts it to a number
  total = +firstNumElement.textContent + +secondNumElement.textContent;
  numQuestions++;  // Update how many questions have been asked
  input.value = ""; // reset the user input
}

function result(){
  // The getAnswer function should just be part of this function.
  // We have a simple if/then here, so the JavaScript ternary syntax is easier:
  correct = input.value == total ? correct + 1 : correct;

  // Only use .innerHTML when the string has HTML in it that needs to be parsed.
  // If not, use .textContent - it's faster and safer.
  numCorrectElement.textContent = correct;
  numQuestionsElement.textContent = numQuestions;
  percentElement.textContent = (correct / numQuestions * 100).toFixed(2) + "%";
  populate();  // Generate new randoms and update the page
}
<h1>Math Test</h1>

<!-- 
  input elements don't have a closing tag
  also, use type=number for numeric input
  But here, since users won't be interacting 
  with this data, don't even use form fields.
-->
<span id="firstnum"></span>
<span type="text" id="calc"></span>
<span type="number" id="secondnum"></span>
<hr>

<!-- You're not submitting data anywhere, so you don't need a form element -->
<input type="number" id="userInput" size="10">
<button type="button">Submit Answer</button>

<p>Total Questions: <span id="ans"></span></p>
<p>Answered Correctly: <span id="score"></span></p>
<p>Your number grade: <span id="percent"></span></p>
0 голосов
/ 26 ноября 2018

Ваш второй вызов getMath выполняется, но это не имеет значения на странице.Эта функция не выбирает новые случайные значения, а просто отображает то, что уже было ... эти случайные значения были сгенерированы только один раз при загрузке скрипта.

Так что переместите эту рандомизирующую логику в getMath.Также старайтесь избегать слишком большого количества глобальных переменных.Если бы вы назначали новый обработчик кликов для вашей кнопки каждый раз, когда вы генерируете новую математическую задачу, тогда вы можете фактически передать все необходимые переменные и сохранить все остальные объявленные как локальные переменные.Удалите onclick из части HTML и используйте код для установки onclick.

Также измените элементы input на элементы span, когда пользователь не должен изменять их содержимое.

Вот как это может работать: 

window.onload = () => getMath(0, 0);

function getMath(correct, wrong) {
    var firstnum = Math.floor(Math.random()*10+1),
        secondnum = Math.floor(Math.random()*10+1),
        calc = "+",
        total = firstnum+secondnum;
    document.getElementById("firstnum").textContent = firstnum;
    document.getElementById("secondnum").textContent = secondnum;
    document.getElementById("calc").textContent = calc;
    document.getElementById("userInput").value = "";
    document.getElementById("btnAnswer").onclick = () => getAnswer(total, correct || 0, wrong || 0);
}

function getAnswer(total, correct, wrong){
    var input = document.getElementById("userInput").value;
    if (input == total){
        correct++;
    } else{
        wrong++;
    }
    result(correct, wrong);
}


function result(correct, wrong){
    var score = correct+wrong;
    var percent = correct/score;
    document.getElementById("score").innerHTML = score;
    document.getElementById("ans").innerHTML = correct;
    document.getElementById("percent").innerHTML = percent*100;
    getMath(correct, wrong);
}
<h1>Math Test</h1>

<span id="firstnum"> </span>
<span id="calc"> </span>
<span id="secondnum"> </span>
<hr>

<form id="form1" onsubmit="return false">
    <input type="text" id="userInput" placeholder="" size="10">
    <button id="btnAnswer">Submit Answer</button>
</form>

<p>Total Answered: <span id="score"></span></p>
<p>Answered Correctly: <span id="ans"></span></p>
<p>Your number grade: <span id="percent">%</span></p>
...