Динамическое обновление/отображение содержимого на HTML

Question

Недавно я закончил курс Javascript на Codecademy. Одно из заданий состояло в том, чтобы создать свою собственную приключенческую программу. Программа довольно простая, и теперь, после завершения курса, я ищу способы оптимизации ее производительности. Я бы хотел сделать это, вместо использования подсказок, возможно, использовать текстовое поле ввода или даже кнопку «да/нет». Уловка заключается в том, что я не хочу иметь кучу отдельных файлов HTML для каждой части истории. Возможно ли динамическое обновление/отображение содержимого на странице HTML на основе того, как пользователь отвечает на вопрос. Можно ли это сделать с помощью простого Javascript или jQuery?

var troll = prompt("You're walking through the forest, minding your own business, and you run into a troll! Do you FIGHT him, PAY him, or RUN?").toUpperCase(); 

switch(troll) { 
    case 'FIGHT': 
     var strong = prompt("How courageous! Are you strong (YES or NO)?").toUpperCase(); 
     var smart = prompt("Are you smart?").toUpperCase(); 
     if(strong === 'YES' || smart === 'YES') { 
      console.log("You only need one of the two! You beat the troll--nice work!"); 
     } else { 
      console.log("You're not strong OR smart? Well, if you were smarter, you probably wouldn't have tried to fight a troll. You lose!"); 
     } 
     break; 
} 

Answer 1

Молодцы на вашем javascript Прогресс до сих пор.

Можно ли динамически обновлять/отображать содержимое на HTML-странице

Да. Вы можете получить действительно долгий путь с этими 5 функций:

• document.createElement(); (http://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)

• document.createTextNode(); (http://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode)

• [ELEMENT].setAttribute(); (http://developer.mozilla.org/en/docs/Web/API/Element/setAttribute)

• [NODE].appendChild(); (http://developer.mozilla.org/en/docs/Web/API/Node/appendChild)

• [NODE].insertBefore();()

Answer 2

Перемещение текста в DIV, и использовать скрыть/показать часть, как вы хотите:

var div1 = document.getElementById("div1"); 
var div2 = document.getElementById("div2"); 
if(strong === 'YES' || smart === 'YES') { 
    div1.style.display = 'block';   
    div2.style.display = 'none'; 
} else { 
    div1.style.display = 'none'; 
    div2.style.display = 'block'; 
}