Question

谢谢。我之前已经像你们许多人建议的那样做了但我遇到的问题是我的项目是基于文本的游戏根据我的选择（选项1或选项2）而改变，我试图使用If语句使代码将从一个选项运行到下一个选项，使用If语句直到结尾，每个选项都包含在您按下的选项中以触发它。也许这不是解决问题的方法。

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="dungeonStyle.css">
</head>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    function codeAddress() {
        document.getElementById("gameText").style.visibility = "hidden";
        document.getElementById("optionOne").style.visibility = "hidden";
        document.getElementById("optionTwo").style.visibility = "hidden";
        document.getElementById("bTEXT").style.visibility = "hidden";
        document.getElementById("bTEXT2").style.visibility = "hidden";
    }
    window.onload = codeAddress;
    </script>
  </head>    

<body>

<div id="startup">
<div class="header">
<h1>DUNGEON DUELER</h1>
</div>

<p id="subtitle">The Interactive Novel</p>
<p id="gameDescription">Your choices forge  your destiny</p>


<button  id = "startButton" onclick="startGame()">Click to begin!
</button>

<p id="gameText">
You're in search of gold and glory. Conquer this dungeon and it shall be yours!
</p>    

<button id = "optionOne" onclick="One()">Option One</button>
<button id = "optionTwo" onclick="Two()">Option Two</button>

<p2 id = "bTEXT">Begin </p2>
<p3 id = "bTEXT2">stuff</p3>

<Script>
function startGame() {
document.getElementById("startButton").style.visibility = "hidden";
document.getElementById("subtitle").style.visibility = "hidden";
document.getElementById("gameDescription").style.visibility = "hidden";
document.getElementById("gameText").style.visibility = "visible";
document.getElementById("optionOne").style.visibility = "visible";
document.getElementById("optionTwo").style.visibility = "visible";
document.getElementById("bTEXT").style.visibility = "visible";
document.getElementById("bTEXT2").style.visibility = "visible";

}   
</Script>

问题

if (function one.onclick){
    var str = document.getElementById("gameText").innerHTML; 
var txt = str.replace("You're in search of gold and glory. Conquer this dungeon and it shall be yours!","blah blah blah");
document.getElementById("gameText").innerHTML = txt;
}
</script>

</div>
</body>
</html>

css在单独的文件中。

我会尽力向自己解释。我正在制作一个基于文本的游戏，其中包含两个确定结果的按钮。我正在尝试如果按下选项1运行代码（更改显示的文本和hp系统），否则执行其他代码/选项。

我的第一次上传，对任何错误道歉。新手。

Answer 1

您需要为onclick事件One和Two定义事件处理程序。在函数One和Two中，您可以定义需要实现的逻辑。事件处理程序可以是function Expression或function declaration。在您的情况下，它是一个函数声明。此外，您可以在参数中传递MouseEvent对象，该参数包含封装在对象中的事件的信息，这可以提供有关该事件的有用信息。
将Script更改为script

function One(){
    var str = document.getElementById("gameText").innerHTML; 
  var txt = str.replace("You're in search of gold and glory. Conquer this dungeon and it shall be yours!","blah blah blah");
  document.getElementById("gameText").innerHTML = txt;

}


function Two(){
    // The other logic

}

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="dungeonStyle.css">
</head>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    function codeAddress() {
        document.getElementById("gameText").style.visibility = "hidden";
        document.getElementById("optionOne").style.visibility = "hidden";
        document.getElementById("optionTwo").style.visibility = "hidden";
        document.getElementById("bTEXT").style.visibility = "hidden";
        document.getElementById("bTEXT2").style.visibility = "hidden";
    }
    window.onload = codeAddress;
    </script>
  </head>    

<body>

<div id="startup">
<div class="header">
<h1>DUNGEON DUELER</h1>
</div>

<p id="subtitle">The Interactive Novel</p>
<p id="gameDescription">Your choices forge  your destiny</p>


<button  id = "startButton" onclick="startGame()">Click to begin!
</button>

<p id="gameText">
You're in search of gold and glory. Conquer this dungeon and it shall be yours!
</p>    

<button id = "optionOne" onclick="One()">Option One</button>
<button id = "optionTwo" onclick="Two()">Option Two</button>

<p2 id = "bTEXT">Begin </p2>
<p3 id = "bTEXT2">stuff</p3>

<script>
function startGame() {
document.getElementById("startButton").style.visibility = "hidden";
document.getElementById("subtitle").style.visibility = "hidden";
document.getElementById("gameDescription").style.visibility = "hidden";
document.getElementById("gameText").style.visibility = "visible";
document.getElementById("optionOne").style.visibility = "visible";
document.getElementById("optionTwo").style.visibility = "visible";
document.getElementById("bTEXT").style.visibility = "visible";
document.getElementById("bTEXT2").style.visibility = "visible";

}   
</script>

Answer 2

if (function one.onclick){

应该是

function One(){

Answer 3

这里有两件事。首先，我没有在您的代码中看到开始脚本标记（以及第一个脚本标记，将Script更改为script：

<script>
if (function one.onclick){
    var str = document.getElementById("gameText").innerHTML; 
    var txt = str.replace("You're in search of gold and glory. Conquer this 
    dungeon and it shall be yours!","blah blah blah");
    document.getElementById("gameText").innerHTML = txt;
}
</script>

其次，最重要的是IF条件：

<script>
function one() {
    var str = document.getElementById("gameText").innerHTML; 
    var txt = str.replace("You're in search of gold and glory. Conquer this 
    dungeon and it shall be yours!","blah blah blah");
    document.getElementById("gameText").innerHTML = txt;
}
</script>

尽量始终使用console.log()，这是你的朋友，呵呵！

如果按下按钮时的其他按钮javascript

3 个答案: