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

我是一名正在尝试学习 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>

最佳答案

代码中的错误:

document.getElementById("shoot").onclick = shot; 您需要使用 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 - 如何调试我的轮盘 JavaScript 程序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43566433/