浏览器在运行代码时显示空白页面

时间:2017-12-06 20:14:36

标签: javascript html if-statement

这可能是一个非常愚蠢的问题,但当我尝试在Chrome和IE等浏览器上运行Notepad ++中的代码时。它没有显示出来。我仔细查看了代码,看看我是否遗漏了什么,但我似乎无法弄清楚是什么。

我最近问了一个关于我的代码的帮助的问题,它得到修复,当我运行"运行代码片段时,它正在运行。但是,当我将代码复制到我的Notepad ++时,它无法正常工作。这是我的代码......

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="gamescript.js">
</head>

<body>
<p id ="door"> Which door do you wish to enter? Door 1 or Door 2? </p>

<input id="myInput" type="text">

<button onclick="myFunction()">Enter</button>

<!---- Question 1 ---->
<p id ="choice1">Behind Door 1 is an empty room. Whilst searching the room for clues, you see a hidden passageway. Do you wish to enter the passageway or continue searching?</p>

<div id="question2">
<input id="myInput2" type="text">

<button onclick="myFunction2()">Enter</button>
</div>


<!---- Boss ---->
<div id="question3">
<h1>Fight the Monster!</h1>

<p id="mspace"></p>

<div id="game">

  <button id="fight">Fight</button>
  <button id="run">Run</button>

</div>
</div>


</body>
</html>

document.getElementById("choice1").style.visibility = "hidden";
document.getElementById("question2").style.visibility = "hidden";
document.getElementById("question3").style.visibility = "hidden";

function myFunction(){
    var door = document.getElementById("myInput").value;
    if (door == "Door 1" || door == "door 1"){
        document.getElementById("door").innerHTML = "You have entered " + door;
        document.getElementById("choice1").style.visibility = "visible";
document.getElementById("question2").style.visibility = "visible";
    }else if (door == "Door 2" || door == "door 2"){
        document.getElementById("door").innerHTML = "You have entered " + door;
        document.getElementById("choice1").style.visibility = "visible";
document.getElementById("question2").style.visibility = "visible";
    }else{
        document.getElementById("door").innerHTML = "You must enter a door!"
    }
}

function myFunction2(){
    var choice1 = document.getElementById("myInput2").value;
    if (choice1 == "enter passageway" || choice1 == "passageway"){
        document.getElementById("choice1").innerHTML = "You entered the " + choice1;
        document.getElementById("question3").style.visibility = "visible";
     }else if (choice1 == "continue searching"){
        document.getElementById("choice1").innerHTML = "You " + choice1; 
        document.getElementById("question3").style.visibility = "visible";
    }else{
        document.getElementById("choice1").innerHTML = "You must choose an option!"
    }
}

// JS for BOSS level
// starting variable for the boss
var stamina = 10;

// starting message
var msg = "A huge, threatening monster wants to fight you! What do you do?";
// run a function that is below
document.getElementById("mspace").innerHTML = msg;

// click a button to execute a function
// NOTE: no parentheses after the function name in these cases
window.onload = function(){
    document.getElementById("fight").onclick = fightResponse;
    document.getElementById("run").onclick = runResponse;
}

function runResponse() {
  if (stamina > 8) {
    msg = "The monster swings his long arm and -- GAME OVER!";
    hideButtons();
  } else if (stamina > 3) {
    msg = "Well, that's one way to end a fight ...";
    hideButtons();
  } else {
    msg = "Keep fighting! The monster is almost dead!";
  }
  writeMessage();
}

function fightResponse() {
  if (stamina > 8) {
    msg = "The monster is strong! It resists your attack!";
  } else if (stamina > 5) {
    msg = "With a loud screech, the monster stands firm.";
  } else if (stamina > 3) {
    msg = "Your attack seems to be having an effect! The monster stumbles!";
  } else if (stamina > 0) {
    msg = "This monster is about to fall! It staggers and reels!";
  } else {
    msg = "With a final swing! The monster has been defeated! You have triumphed!";
    hideButtons();
  }
  // create new random number from 0 to 5
  var damage = Math.floor(Math.random() * 6);
  // subtract it from stamina
  stamina -= damage;
  writeMessage();
}

function hideButtons() {
  // changes the class on the div - see the CSS pane 
  document.getElementById("game").className = "hideThis";
}

function writeMessage() {
  document.getElementById("mspace").innerHTML = msg;
}

我尝试使用F12开发人员工具,但没有显示任何错误。我不知道为什么它不能在Notepad ++上工作。非常感谢所有帮助,非常感谢!

1 个答案:

答案 0 :(得分:1)

我认为您需要添加</script>以便

<script type="text/javascript" src="gamescript.js" >

成为这个:

<script type="text/javascript" src="gamescript.js" ></script>