1

我很难弄清楚这些文件有什么问题。Firebug 会加载 HTML 和 .js 文件，但是当您按下 HTML 文件上的按钮时，它不会执行任何操作。在 firebug 中放置断点表明 .js 代码没有与 HTML 文件对话。我不知道 Javascript 是否因为代码中的其他内容而无法工作，或者我在 HTML 文件中有一个非常愚蠢的错误。谢谢你的帮助。

HTML 文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dice Roller</title>
<style type="text/css">
@import "main.css";
</style>
<script type="text/javascript" src="roller.js"></script>
<script type="text/javascript" src="roller_library.js"></script>

</head>
<body>
<div id="content">

<h1>Dice Roller</h1><br/><br/>
Die 1: <span id="die_1">&nbsp;</span><br /><br />
Die 2: <span id="die_2">&nbsp;</span><br /><br />
<label>Message: </label>
<span id="message">&nbsp;</span><br/><br />
<label>&nbsp;</label>
<input type="button" id="roll" value="Roll the Dice" /> <br/>

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

滚筒.js

var die = new Die();
var pairofDice = PairofDice();

var $ = function (id) { return document.getElementById(id); }

var update_display = function() {
var specialMsg;
var die_1 = ParseInt(Die.getValue1());
var die_2 = ParseInt(Die.getValue2());
 $("die_1").value = die_1;
 $("die_2").value = die_2;

var sum = PairofDice.getSum(die_1, die_2);
switch (sum){
    case "2":
        specialMsg = "Snake eyes"
        break;
    case "7":
        specialMsg = "Craps";
        break;
    case "12":
        specialMsg = "Box Cars";
        break;
    }

 $("message").value = specialMsg;
}

var rollDice_click = function() {
 $("die_1").value = "";
 $("die_2").value = "";

 update_display();
}

window.onload = function() {
$("roll").onclick = rollDice_click;
}

roll_library.js

var Die = function(sides) {
this.sides = 6;
return this;
}
Die.prototype.roll = function(sides) {
this.sides = sides;
do{
    number = parseInt (10 * Math.random());
} while (number >this.sides || number <1);

return number;
}
Die.prototype.getValue = function() {
this.roll = Die.roll();
return this;
}

var PairofDice = function(sides) {
this.sides = 6;
return this;
}
PairofDice.prototype.roll = function() {
Die.roll(6);
return number;
}
PairofDice.prototype.getValue1 = function() {
Die.getValue();
return;
}
PairofDice.prototype.getValue2 = function() {
Die.getValue();
return;
}
PairofDice.prototype.getSum = function(d1,d2) {
var sum;

var die1 = parseInt(d1);
var die2 = parseInt(d2);

sum = die1 + die2;

return sum;
}

另一种选择是我不明白我应该做什么，如果是这种情况，请告诉我，以便我可以获得更多一对一的帮助。

4

2 回答 2

0

在roller_library.js 加载之前roller.js 正在运行，因此当在roller.js 的第1 行使用Die 时，没有定义Die 和PairOfDice。因此，roller.js JavaScript 在该点失败并中止，并且 window.onload 行永远不会执行。

于 2012-10-23T00:16:30.373 回答
0

好的，所以我完全跳过了 onclick 问题，所以我更深入地查看了代码。有几个问题，代码甚至不会运行，即使 onclick 不起作用。所以，我修复了它并添加了一些注释，如果你将它与你的代码进行比较，它们可能会帮助你找出问题所在。这绝不是最佳实践代码，我只是尝试将您的代码想法转化为工作代码，希望您可以从中学习。

请让我知道它是否有帮助或者您需要任何澄清:)

// Can't do this at the start of the script as they are undefined
//var die = new Die();
//var pairofDice = PairofDice();

// This is a good idea
var $ = function(id) {
    return document.getElementById(id);
}

// Let's include the model code ahead of the application code
// Our Die, when rolled it should have update it's value
var Die = function(sides) {
    // Let's use the parameter to decide how many sides our die has
    // " || 6" means that if sides has no value, it will default to 6
    // This helps us prevent errors from having no number of sides
    // defined when we roll the dice
    this.sides = sides || 6;

    // We will be able to access the value from elsewhere, but let's give
    // it an initial random value!
    this.value = this.roll();

    return this;
}

// Extending our Die's prototype to allow rolling!
// We don't need the sides parameter anymore, compare this old version
Die.prototype.old_roll = function(sides) {
    // This would remove any value we have previously assigned to sides
    this.sides = sides;
    // This loop will create a bias in the random numbers generated and if
    // the number of sides is greater than 10, it will never show it
    do {
        number = parseInt(10 * Math.random());
    } while (number > this.sides || number < 1);

    return number;
}

// Cleaner version of roll
Die.prototype.roll = function() {
    // Get a random number [ This will be a decimal number between 0 and 1]
    var random_number = Math.random()
    // Multiply it by (#no of sides - 1) 
    // [This will be a decimal value between 0 and the (#no of sides - 1)]
    var scaled_number = (this.sides - 1) * random_number
    // We round the number so it's always an integer number
    // We also add one to the result so we get a number between (1..# of sides)
    // It should be clear that we had to subtract from the number of sides before
    // we multiplied so that whenever we add one here we don't go outside our 
    // desired range of numbers (else the dice would read 1..7 with only 6 sides
    var result = Math.round(scaled_number) + 1

    // Assign the result to our die for future reference
    this.value = result

    // Return the result
    return result
}

/* We have no need for getValue as we can access the value of the dice
Die.prototype.getValue = function() {
    this.roll = Die.roll();
    return this;
}*/

// The PairofDice should help us manage 2 dice   
var PairofDice = function(sides) {
    // The sides parameter will help us initialise the two dice
    this.dice1 = new Die(sides);
    this.dice2 = new Die(sides);

    return this;
}

// When we roll the pair, it should roll each dice individually
// It will return an array with the value of each roll, for convenience
PairofDice.prototype.roll = function() {
    var roll1 = this.dice1.roll();
    var roll2 = this.dice2.roll();
    return [roll1, roll2];
}

// Return the value of the first dice
PairofDice.prototype.getValue1 = function() {
    return this.dice1.value;
}

// Likewise for the second dice
PairofDice.prototype.getValue2 = function() {
    return this.dice2.value;
}

// Return the total score for all dices, there is no need to take
// any parameters to this function as we have all the data within 
// our PairOfDice instace (referenced by 'this' keyword)
PairofDice.prototype.getSum = function() {
    // No need to parseInt on these values as we only store integer values
    var sum = this.dice1.value + this.dice2.value;

    return sum;
}


// Now we can define our variables 
// There is no need to make an instance of Die as we can just use
// PairofDice to manage 2 dice for us, make sure to use the new keyword!
//var die = new Die();
var pairofDice = new PairofDice();    

// Updating the display when a roll is made
var update_display = function() {
    var specialMsg;

    // We can simplify this a lot now
    //var die_1 = ParseInt(Die.getValue1());
    //var die_2 = ParseInt(Die.getValue2());

    // value doesn't set the text on span, so we will use innerText
    $("die_1").innerText = pairofDice.getValue1();
    $("die_2").innerText = pairofDice.getValue2();

    // Get the sum of the roll
    //var sum = PairofDice.getSum(die_1, die_2);
    var sum = pairofDice.getSum();

    // In the switch statement, it should be integer cases instead of string
    switch (sum) {
    case 2:
        specialMsg = "Snake eyes"
        break;
    case 7:
        specialMsg = "Craps";
        break;
    case 12:
        specialMsg = "Box Cars";
        break;
     // we add a default message incase there is no special, because then it will print 'undefined'
    default:
        specialMsg = "No luck";
    }

    // Show the message!
    $("message").innerText = specialMsg;
}

var rollDice_click = function() {
    // These aren't needed as the value will always be updated
    //$("die_1").value = "";
    //$("die_2").value = "";

    // Roll the dice..
    pairofDice.roll();
    // Show the results!
    update_display();
}

window.onload = function() {
    $("roll").onclick = rollDice_click;
}​
于 2012-10-22T22:43:11.920 回答