функция основного цикла не запускает вложенные функции

Question

Я новичок в мире JavaScript и программирования и борюсь с базовым упражнением на JavaScript. Я должен создать с помощью только базовых функций таблицу времен, основанную на значении пользовательской подсказки, это должен цикл, который прерывается только тогда, когда Пользователь вставляет значение -1. Хотя цикл не печатает таблицу времени до тех пор, пока я не прерву цикл с -1, кажется, что цикл выполняется слишком быстро.

Вот мой код:

var userInput;

function checkValidity(question) {

  if(isNaN(question) || (question === "" )) {
    console.log('Inserire un numero valido');
    return false;
  } else {
    console.log('defined');
    return true;
  }
}

function timeTable(valueUser) {
  document.write("Times Table for number: " + valueUser + "<br />");
  
  for(var i = 0; i < 10; i++) {					
    document.write(valueUser + " * " + i + " = " + valueUser * i + "<br />");
  }

}

function showQuestion() {
  userInput = parseInt(prompt("Enter your Times Table value:"));
  
  var answerValidate = checkValidity(userInput);

  if(answerValidate) {
    if(userInput !== -1) {
      timeTable(userInput);
      showQuestion();
    } else {
      console.log("Grazie per aver partecipato!");
    }
  } else {
    showQuestion();
  }

  
}

showQuestion();

Кто-нибудь может подсказать мне в чем я не прав?

Спасибо всем!

Answer 1

Я думаю, что этот код работает отлично. Что вам не хватает, так это то, что prompt() блокирует, и никакой javascript не может работать, пока эта функция не вернется.

Чтобы избежать этого, не используйте prompt(), а просто <input type="text" />. Это, очевидно, выведет вас из используемой вами синхронизированной парадигмы и потребует асинхронной реструктуризации вашего кода. Это очень легко сделать, правда. Это должно помочь вам:

<input id="campo_di_testo" type="text" /><input id="bottone_invia" type="button" value="invia" />

<script>

  document.getElementById("bottone_invia").onclick = () => {
    var textNode;

    textNode = document.getElementById("campo_di_testo");
    console.log("hai premuto invia e il testo immesso è: " + textNode.value);
  };

</script>

Кроме того, избегайте использования document.write(), как указывает Ибрагим. Он перезапишет дерево DOM и удалит элементы <input>.

Вы можете использовать <textarea> так:

<textarea id="area"></textarea>

// in JS:
var area = document.getElementById("area");
area.value += "nuova riga da appendere" + "\n";
                                          ^^^^ don't forget to append the newline

или, аналогично, любой <div> как этот:

<div id="output"></div>

// in JS:
var output = document.getElementById("output");
output.innerText += "nuova riga da appendere" + "<br />";

Answer 2

document.write не выполняет свою работу сразу, он просто помещает ее в очередь, и «браузер» выполняет эту работу, когда ему больше нечего делать. Вызывая showQuestion непосредственно после этих document.write вызовов, вы сохраняете «браузер» занятым. Таким образом, он выполнит эти накопленные задания после того, как рекурсия остановится (когда пользователь введет -1).

Чтобы это исправить, просто поставьте следующий вызов на showQuestion в очередь, также используя setTimeout без задержки (или с задержкой 0):

setTimeout(showQuestion);

Пример:

var userInput;

function checkValidity(question) {

  if(isNaN(question) || (question === "" )) {
    console.log('Inserire un numero valido');
    return false;
  } else {
    console.log('defined');
    return true;
  }
}

function timeTable(valueUser) {
  document.write("Times Table for number: " + valueUser + "<br />");
  
  for(var i = 0; i < 10; i++) {					
    document.write(valueUser + " * " + i + " = " + valueUser * i + "<br />");
  }

}

function showQuestion() {
  userInput = parseInt(prompt("Enter your Times Table value:"));
  
  var answerValidate = checkValidity(userInput);

  if(answerValidate) {
    if(userInput !== -1) {
      timeTable(userInput);
      setTimeout(showQuestion);
    } else {
      console.log("Grazie per aver partecipato!");
    }
  } else {
    showQuestion();
  }
}

showQuestion();

С учетом вышесказанного я советую вам вообще не использовать document.write, использовать альтернативу типа console.log или изменить textContent определенного элемента. Также используйте элемент <input> вместо навязчивых вызовов prompt. Здесь не нужно никаких циклов, пользователь может вводить столько значений, сколько ему нравится, когда ему нравится.

Пример:

function timesTable(valueUser) {
  var result = "Times Table for number: " + valueUser + "\n";          // accumulate the result in a string (use "\n" instead of "<br>")
  
  for(var i = 0; i < 10; i++) {					
    result += valueUser + " * " + i + " = " + valueUser * i + "\n";
  }
   
  return result;                                                       // and return it
}

function showQuestion() {
  var value = parseInt(document.getElementById("my-input").value);     // get the value from the input
  
  if(isNaN(value)) {                                                   // if it is not valid
    alert("Invalid input! Try again!");                                // alert the user and urge him to start over
  } else {                                                             // otherwise
    document.getElementById("my-result").textContent = timesTable(value); // create the times table of this number and show them in the my-result element 
  }
}

document.getElementById("my-button").onclick = function() {            // when the button is clicked
    showQuestion();                                                    // call showQuestion
};

Show times table