Question

我最近完成了Codecademy的Javascript课程。其中一项任务是创建一个选择自己的冒险计划。该程序非常基础，现在完成课程后，我正在寻找优化其性能的方法。我想做的是，使用输入文本框甚至是“是/否”按钮，而不是使用提示。问题是，我不希望故事的每个部分都有一堆单独的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();（http://developer.mozilla.org/en-US/docs/Web/API/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';
}

动态更新/显示HTML

2 个答案: