Question

我是一名学生正在尝试学习JavaScript。我正在尝试随机编码带有事件处理程序和按钮的数组，用于返回结果小游戏。我们需要使用下面的一些结构。在研究这个主题，我看到还有其他方法可以写此

开发人员工具和验证（WC3）不会显示任何错误。谁能告诉我我的方式错误？

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>HW_6 Random Russian Roulette</title>
</head>

<body>

    <script language="Javascript">
        function shoot() {
            var iShot = Math.floor(Math.random() * 6);
            var trigger = new Array();
            trigger[0] = "ch1 lucky";
            trigger[1] = "ch2 click";
            trigger[2] = "ch3 BANG!";
            trigger[3] = "ch4 click";
            trigger[4] = "ch5 lucky";
            trigger[5] = "ch6 Lucky";

            window.onload = function() {
                document.getElementById("shoot").onclick = shoot;
                document.getElementById("divOutput").innerHTML = trigger;
            }

            alert("trigger[shoot]");
        }
    </script>


    <form>
        <input type="button" value="It's loaded..." id="shoot">
        <div id="divOutput">shoot</div>
        ;
    </form>
</body>
</html>

Answer 1

代码中的错误：

document.getElementById("shoot").onclick = shoot;您需要使用shoot()来调用函数。执行以下操作在按钮上添加单击事件（纯js）：

  var st = document.getElementById("shoot");
  st.addEventListener("click", function(e) {
    shoot();
  });

一些改进：

var iShot = Math.floor(Math.random() * trigger.length);这会从数组中选择一个随机索引，因为它使用数组长度作为基数。

定义数组，你可以在js

中做到这一点

var trigger = ["ch1 lucky", "ch2 click", "ch3 BANG!", "ch4 click", "ch5 lucky", "ch6 Lucky"];

（解决方案）两个选项：

选项1（纯javascript）

document.addEventListener("DOMContentLoaded", function(event) {
  //do work
  var st = document.getElementById("shoot");
  st.addEventListener("click", function(e) {
    shoot();
  });

  function shoot() {
    var trigger = ["ch1 lucky", "ch2 click", "ch3 BANG!", "ch4 click", "ch5 lucky", "ch6 Lucky"];
    //get a random element from array
    var iShot = Math.floor(Math.random() * trigger.length);
    //out put result now
    document.getElementById("divOutput").innerHTML = trigger[iShot];
  }
});

<form>
  <button type="button" id="shoot">It's loaded...</button>
  <div id="divOutput">shoot</div>
</form>

选项2（使用jQuery）

$(document).ready(function() {

  $('#shoot').on('click', function() { shoot(); });

  function shoot() {
    var trigger = ["ch1 lucky", "ch2 click", "ch3 BANG!", "ch4 click", "ch5 lucky", "ch6 Lucky"];
    var iShot = Math.floor(Math.random() * trigger.length);
    $("#divOutput").html(trigger[iShot]);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form>
  <button type="button" id="shoot">It's loaded...</button>
  <div id="divOutput">shoot</div>
</form>

如何调试我的轮盘赌JavaScript程序？

1 个答案:

代码中的错误：

一些改进：

（解决方案）两个选项：

选项1（纯javascript）

选项2（使用jQuery）