试图获得按钮来激活将打印文本的功能

Trying to get button to activate a function that will print text

本文关键字：打印 文本 功能 激活 按钮      更新时间：2023-09-26

我正在制作一款基于文本的冒险游戏。现在我只有性别选择。在选择性别之后，您将看到一个屏幕，其中包含一个字符串和一个按钮。我要做的是，一旦按钮被点击，就开始游戏(简单地打印第一个场景的字符串)。

这是我到目前为止的代码…

<!DOCTYPE html>
<head><title>Adventure Game</title>
<link src="/home/logan/game2" type="text/javascript">
</head>
<body>
<script type="text/javascript"></script>
<script>
confirm("Ready to play?");
    var age = prompt("How old are you?");
    if (age >= 18) {
        document.write(" "); 
    } else {
         document.write("You're less than 18? You better just stay         home, filthy pansy.");
    }
    document.write("Please select your gender.")
 </script>
 <p>
 <select id="genderlist"> 
     <option value="null"> </option>
     <option value='Male'> Male </option>
     <option value='Female'> Female </option>
     <option value='Other'> Other </option>
  </select>
 </p>
 <script>
 document.getElementById("genderlist").onchange = function() {
    var gender=document.getElementById("genderlist").value;
    if(gender=="Male"){
    document.write("Okay");
    document.write('<p><button id="start" onclick="function()"> Lets begin, shall we?</button></p>');
    }
    else if(gender=="Female"){
    document.write("Sounds Good");
    document.write('<p><button id="start"> Lets begin, shall we?</button></p>');
    }
    else{
    document.write("I don't think this will be for you.");
    }
    return false
 };
 </script>
 <script>
 document.getElementById("start").onclick = function(){
     document.write("<p> This is nice </p>");
 };

 </script>
 </body>
 </html>

是否有一些明显的错误我忽略了?

你的问题

问题是您将按钮click侦听器设置得太早。我的意思是你的<button>不存在，也没有插入到DOM中。
所以document.getElementById("start")初始化为null

我的解决方案

  • [more cleaner]我用.createElement和。appendchild代替document.write .

  • [fun]我把确认放在if语句中。如果访客没有准备好，他不会玩;)

  • [你的问题]我设置按钮click监听器后，按钮已创建并追加在主体

if (confirm("Ready to play?")) {
    var age = prompt("How old are you?");
    if (age < 18) {
         document.body.appendChild( createElement("p", "You're less than 18? You better just stay home, filthy pansy.") );
    }
    document.body.appendChild( createElement("p", "Please select your gender."));
 
 document.getElementById("genderlist").onchange = function() {
    var gender=document.getElementById("genderlist").value;
    if(gender==="Male"){
      document.body.appendChild( createElement("p", "Okay") );
      var button = createElement("button", "Lets begin, shall we?", "start");
      document.body.appendChild( button );
      // Set listener
      document.getElementById("start").onclick = function(){
        document.body.appendChild( createElement("p", "This is nice") );
      };
    }
    else if(gender==="Female"){
      document.body.appendChild( createElement("p", "Sounds Good") );
      var button = createElement("button", "Lets begin, shall we?", "start");
      document.body.appendChild( button );
      // Set listener
      document.getElementById("start").onclick = function(){
        document.body.appendChild( createElement("p", "This is nice") );
      };
    }
    else{
      document.body.appendChild( createElement("p", "I don't think this will be for you.") );
    }
    return false
 };
}
function createElement(type, text, id){
  var el = document.createElement(type);
  if (id) {
    el.id = id;
  }
  el.innerHTML = text;
  return el;
}
<p>
 <select id="genderlist"> 
     <option value="null"> </option>
     <option value='Male'> Male </option>
     <option value='Female'> Female </option>
     <option value='Other'> Other </option>
  </select>
 </p>

createElement()函数在这里只是因为我不喜欢重复的代码，我很懒。

相关文章：