在javascript中没有最大调用堆栈大小错误的情况下，持续更新html的最佳方法是什么

Question

我正在为朋友的网站编写一个简单的基于文本的游戏。我需要能够更改HTML元素或更新HTML页面，而不会遇到最大调用堆栈超出错误。我目前正在使用

document.getElementById('console').innerHTML += "whatever"

我需要一个没有错误的方法

这是加载的第一个函数。然后它转到prompt_input((；作用

function title_screen(){
document.getElementById('console').innerHTML += '...'
quests.push('Getting Started');
prompt_input();
}

这是提示输入功能。它在运行适当的函数时接受用户输入。除了restart((之外的所有函数；函数返回prompt_input((；以获得下一轮玩家输入。

function prompt_input(){
var action = document.getElementById("myInput").value;
if (action == ""){
prompt_input();
}
else{  
document.getElementById('console').innerHTML += action;
var acceptable_actions = [...];
var acc_check = acceptable_actions.includes(action);
if (action  == 'help'){
instruction_menu();
}
else if (action == "play"){
prompt_input();
}
else if (action == "y"){
player_yes();
}
else if (action == "yes"){
player_yes();
}
else if (action == 'n'){
player_no();
}
else if (action == 'no'){
player_no();
}
else if (action  == 'loc'){
print_location();
prompt_input();
}
else if (action  == 'location'){
print_location();
prompt_input();
}
else if (action == 'name'){
document.getElementById('console').innerHTML += "..."
prompt_input();
}
else if (action == 'look'){
if (player_location == 'The Casino'){
casino_look();
}
else{
player_look();
}}
else if (action == 'right'){
player_right();
}
else if (action == 'left'){
player_left();
}
else if (action  == 'restart'){
restart_game();
}
else if (action  == 'items'){
items_print();
prompt_input();
}
else if (action  == 'read'){
player_read();
prompt_input();
}
else if (action  == 'play'){
if (player_location == 'Title Screen'){
start_game();
}
else{
document.getElementById('console').innerHTML += "..."
prompt_input();
}
}
else if (action  == 'evb'){
hidden_prompt();
}
else if (action  == 'outside'){
print_outside();
}
else if (action  == 'back'){
if (items.includes('Emu') === true){
if (player_location == 'Title Screen'){
document.getElementById('console').innerHTML += '...'
prompt_input();
}
else{
player_back();
}
}
else if (items.includes('Clown Car') === true){
if (player_location == 'Title Screen'){
document.getElementById('console').innerHTML += '...'
prompt_input();
}
else{
player_back();
}
}
else if (items.includes('Sailboat') === true){
if (player_location == 'Title Screen'){
document.getElementById('console').innerHTML += '...'
prompt_input();
}
else{
player_back();
}
}
else if (characters.includes('KGB Platoon') === true){
if (player_location == 'Title Screen'){
document.getElementById('console').innerHTML += '...'
prompt_input();
}
else{
player_back();
}
}
else if (characters.includes('KGB Horde') === true){
if (player_location == 'Title Screen'){
document.getElementById('console').innerHTML += '...'
prompt_input();
}
else{
player_back();
}
}
else if (characters.includes('KGB Army') === true){
if (player_location == 'Title Screen'){
document.getElementById('console').innerHTML += '...'
prompt_input();
}
else{
player_back();
}
}
}
else if (action  == 'next'){
if (items.includes('Emu') === true){
if (player_location == 'End Screen'){
document.getElementById('console').innerHTML += '...'
prompt_input();
}
else{
player_next();
}
}
else if (items.includes('Clown Car') === true){
if (player_location == 'End Screen'){
document.getElementById('console').innerHTML += '...'
prompt_input();
}
else{
player_next();
}
}
else if (characters.includes('KGB Horde') === true){
if (player_location == 'End Screen'){
document.getElementById('console').innerHTML += '...'
prompt_input();
}
else{
player_next();
}
}
else if (characters.includes('KGB Army') === true){
if (player_location == 'End Screen'){
document.getElementById('console').innerHTML += '...'
prompt_input();
}
else{
player_next();
}
}
else if (items.includes('Sailboat') === true){
if (player_location == 'End Screen'){
document.getElementById('console').innerHTML += '...'
prompt_input();
}
else{
player_next();
}}
}
else if (action == 'balance'){
print_balance();
}
else if (action == 'bal'){
print_balance();
}
else if (action == 'shop'){
player_store();
}
else if (action == 'sell'){
player_sell();
}
else if (action == 'store'){
player_store();
}
else if (action == 'buy'){
player_buy();
}
else if (action == 'boom'){
boom();
}
else if (action == 'military gun call'){
military_gun_call();
}
else if (action == 'mgc'){
military_gun_call();
}
else if (action == 'eat'){
player_eat();
}
else if (action == 'oml'){
omlette();
}
else if (action == 'russia'){
read_russia_book();
}
else if (action  == 'dev'){
document.getElementById('console').innerHTML += "..."
prompt_input();
}
else if (action == 'hostage'){
if (player_location == 'Milk Store'){
if ('Gun' in  items === true){
document.getElementById('console').innerHTML += "..."
items.push("Stalin's Hair");
taken_items.push("Stalin's Hair");
document.getElementById('console').innerHTML += "You have aquired Stalin's Hair."
document.getElementById('console').innerHTML += "..."
document.getElementById('console').innerHTML += 'You have aquired Milk.'
items.push("Milk");
taken_items.push("Milk");
prompt_accomplish[player_location] = true;
balance =  balance - .35;
prompt2();
}
else if (death_survivability >= 1){
document.getElementById('console').innerHTML += "You survived death this time, but your death survivability has decreased."
death_survivability =  death_survivability - 1;
prompt_input();
}
else{
document.getElementById('console').innerHTML += "..."
restart(30);
}
}
else{
document.getElementById('console').innerHTML += "That command doesn't work here"
}
}
else if (action == 'produce'){
if (player_location == 'Milk Store'){
if (death_survivability >= 1){
document.getElementById('console').innerHTML += "You survived death this time, but your death survivability has decreased."
death_survivability =  death_survivability - 1;
prompt_input();
}
else{
document.getElementById('console').innerHTML += "..."
restart(10);
}
}
else{
document.getElementById('console').innerHTML += "That command doesn't work here"
}
}
else if (action == 'dairy'){
if (player_location == 'Milk Store'){
document.getElementById('console').innerHTML += "..."
prompt_accomplish[player_location] == true;
items.push("Milk");
taken_items.push("Milk");
balance =  balance - .35;
prompt2();
}
else{
document.getElementById('console').innerHTML += "That command doesn't work here"
}
}
else if (action == 'quests'){
quest_print();
prompt_input();
}
else if (action == 'left wing'){
if (player_location == 'Picracko Gallery'){
if (death_survivability >= 1){
document.getElementById('console').innerHTML += "You survived death this time, but your death survivability has decreased."
death_survivability =  death_survivability - 1
prompt_input();
}
else{
document.getElementById('console').innerHTML += "..."
restart(10);
}
}
else{
document.getElementById('console').innerHTML += "That command doesn't work here"
}
}
else if (action == 'right wing'){
if (player_location == 'Picracko Gallery'){
document.getElementById('console').innerHTML += "..."
prompt2();
}
else{
document.getElementById('console').innerHTML += "That command doesn't work here"
}
}
else if (action == 'bet'){
bet_print = "Bet." * 1000;
for (character in bet_print){
document.getElementById('console').innerHTML += character;
}
prompt_input();
}
else if (action == 'completed quests'){
completed_quest_print();
}
else if (action == 'clear'){
clear();
prompt_input();
}
else if (action == 'characters'){
characters_print();
}
else if (action == 'tmdc'){
if ( tmdc !== true){
completed_quests.push("...");
items.push('Emu');
balance =  balance + (100*10*10*10*10);
tmdc = true;
items.push("...");
prompt_input();
}
else{
document.getElementById('console').innerHTML += "..."
prompt_input();
}
prompt_input();
}
else if (action  == 'shark'){
document.getElementById('console').innerHTML += "..."
prompt2();
}
else if (action  == 'harmless fish'){
document.getElementById('console').innerHTML += "..."
prompt2();
}
else if (action  == 'communism'){
completed_quests.push("Summon Stalin");
prompt_input();
}
else if (action  == "bowling alley"){
if (player_location == "Payphone"){
player_location = "Bowling Alley"
prompt_accomplish2[player_location] = true;
document.getElementById('console').innerHTML += "..."
prompt_input();
}
else{
document.getElementById('console').innerHTML += "That command does not work here."
prompt_input();
}
}
else if (action  == "redacted"){
if (player_location == "Payphone"){
player_location = "REDACTED, Russia"
prompt_accomplish2[player_location] = true;
document.getElementById('console').innerHTML += "..."
prompt_input();
}
else{
document.getElementById('console').innerHTML += "That command does not work here."
prompt_input();
}
}
else if (action  == "india"){
if (player_location == "Payphone"){
prompt_accomplish2[player_location] = true;
player_location = "India"
document.getElementById('console').innerHTML += "..."
prompt_input();
}
else{
document.getElementById('console').innerHTML += "That command does not work here."
prompt_input();
}
}
else if (action  == "picracko"){
if (player_location == "Payphone"){
document.getElementById('console').innerHTML += "..."
document.getElementById('console').innerHTML += "..."
prompt_input();
}
else{
document.getElementById('console').innerHTML += "That command doesn't work here."
prompt_input();
}
}
else if (action  == "gerbils"){
if (player_location == "Payphone"){
document.getElementById('console').innerHTML += "..."
document.getElementById('console').innerHTML += "..."
prompt_input();
}
else{
document.getElementById('console').innerHTML += "That command doesn't work here."
prompt_input();
}
}
else if (action == "shoeburt"){
if (player_location == "Payphone"){
document.getElementById('console').innerHTML += "..."
prompt3();
}
else{
document.getElementById('console').innerHTML += "That command doesn't work here."
prompt_input();
}}
else if (action == "fuick"){
if (player_location == "Payphone"){
document.getElementById('console').innerHTML += "..."
document.getElementById('console').innerHTML += "..."
prompt_input();
}
else{
document.getElementById('console').innerHTML += "That command doesn't work here."
prompt_input();
}
}
else if (action == "eddie"){
if (player_location == "Payphone"){
document.getElementById('console').innerHTML += "..."
document.getElementById('console').innerHTML += "..."
prompt_input();
}
else{
document.getElementById('console').innerHTML += "That command doesn't work here."
prompt_input();
}
}
else if (action == 'shake'){
magic_ball();
}
else if (action == "painting"){
picracko_original();
}
else if (action == 'h2z456d'){
if (h2z456d === false){
document.getElementById('console').innerHTML += "Congrats on getting the code! Here is 10000 Dollars, an omletting gun and 4 omlettes."
balance =  balance + 10000;
items.push("Omletting Gun");
items.push("Omlette");
items.push("Omlette");
items.push("Omlette");
items.push("Omlette");
h2z456d = true;
prompt_input();
}
if (h2z456d === true){
document.getElementById('console').innerHTML += "You already have used this prompt."
prompt_input();
}
}
if( acc_check === false){
var Action_help = "You are unaware of what to do. Try a different command. (Type help for a list of actions)"; 
document.getElementById('console').innerHTML += Action_help;
prompt_input();
}
}
}

Answer 1

function prompt_input(){
var action = document.getElementById("myInput").value;
if (action == ""){
prompt_input();
}
...

这里有一个无限循环。

在这个条件之前，任何东西都不能在下一次调用时更改条件：如果输入的value是""，那么它仍然是，并且您的代码将继续，直到它达到最大调用堆栈。

我不太确定你期望这个递归调用做什么，但从快速的角度来看，我认为当这种情况发生时，你只需要提前退出：

function prompt_input(){
var action = document.getElementById("myInput").value;
if (action == ""){
return; // early exit
}
...