HTML不调用Javascript onclick_Javascript_Xhtml

HTML不调用Javascript onclick

javascript

HTML不调用Javascript onclick,javascript,xhtml,Javascript,Xhtml,我很难找出这些文件的错误。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/

我很难找出这些文件的错误。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>

roller_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;
}

var Die=功能（侧面）{
这两个边=6；
归还这个；
}
Die.prototype.roll=功能（侧面）{
这个边=边；
做{
number=parseInt（10*Math.random（））；
}当（number>this.sides | | number好的，所以我在onclick问题上完全开炮了，所以我对代码进行了更深入的研究。有几个问题，即使onclick不起作用，代码也不会运行。因此，我修复了它，并添加了一些注释，如果您将它与代码进行比较，可能会帮助您找出错误的地方。这这绝不是最佳实践代码，我只是尝试将您的代码想法转化为工作代码，希望您能从中学习
请让我知道这是否有帮助，或者您需要澄清什么：）
//无法在脚本开始时执行此操作，因为它们未定义
//var die=新的die（）；
//var pairofDice=pairofDice（）；
//这是个好主意
var$=函数（id）{
返回文档.getElementById（id）；
}
//让我们在应用程序代码之前包含模型代码
//我们的骰子，当掷骰子时，应该更新它的价值
var Die=功能（侧面）{
//让我们用这个参数来决定我们的模具有多少面
//“| | 6”表示如果边没有值，它将默认为6
//这有助于我们防止错误没有多少边
//当我们掷骰子时定义
this.sides=sides | | 6；
//我们将能够从其他地方获取价值，但让我们给出
//它是一个初始随机值！
this.value=this.roll（）；
归还这个；
}
//扩展我们的模具原型以允许滚动！
//我们不再需要sides参数，比较一下这个旧版本
Die.prototype.old_roll=功能（侧面）{
//这将删除我们以前分配给各边的任何值
这个边=边；
//此循环将在生成的随机数中产生偏差，如果
//边的数目大于10，它将永远不会显示它
做{
number=parseInt（10*Math.random（））；
}而（数>本边| |数<1）；
返回号码；
}
//清洁版
Die.prototype.roll=函数（）{
//获取一个随机数[这将是一个介于0和1之间的十进制数]
var random_number=Math.random（）
//将其乘以（#边数-1）
//[这将是一个介于0和（#边数-1）之间的十进制值]
变量标度_数=（this.sides-1）*随机_数
//我们对数字进行四舍五入，因此它始终是整数
//我们还向结果中添加了一个，因此我们得到一个介于（1..条边）之间的数字
//应该很清楚，我们必须从之前的边数中减去
//我们相乘，这样每当我们在这里加一个，我们就不会超出我们的范围
//所需的数字范围（否则骰子读数为1..7，只有6个边
var结果=数学四舍五入（缩放数量）+1
//将结果分配给我们的模具，以备将来参考
this.value=结果
//返回结果
返回结果
}
/*我们不需要getValue，因为我们可以访问骰子的值
Die.prototype.getValue=函数（）{
this.roll=Die.roll（）；
归还这个；
}*/
//PairofDice应该可以帮助我们管理2个骰子
var PairofDice=函数（边）{
//sides参数将帮助我们初始化两个骰子
this.dice1=新模具（侧面）；
此图2=新模具（侧面）；
归还这个；
}
//当我们掷骰子时，它应该分别掷每个骰子
//为了方便起见，它将返回一个带有每个滚动值的数组
PairofDice.prototype.roll=函数（）{
var roll1=this.dice1.roll（）；
var roll2=this.dice2.roll（）；
返回[roll1，roll2]；
}
//返回第一个骰子的值
PairofDice.prototype.getValue1=函数（）{
返回此.1.0值；
}
//第二个骰子也是这样
PairofDice.prototype.getValue2=函数（）{
返回此.2.0值；
}
//返回所有骰子的总分，不需要取
//此函数的任何参数，因为我们有其中的所有数据
//我们的PairOfDice Instance（由“this”关键字引用）
PairofDice.prototype.getSum=函数（）{
//不需要对这些值进行parseInt，因为我们只存储整数值
var sum=this.dice1.value+this.dice2.value；
回报金额；
}
//现在我们可以定义变量了
//没有必要制作一个Die实例，因为我们可以使用它
//要为我们管理2个骰子，请确保使用新关键字！
//var die=新的die（）；
var pairofDice=新的pairofDice（）；
//滚动时更新显示
变量更新显示=函数（）{
var specialMsg；
//我们现在可以简化很多
//var die_1=ParseInt（die.getValue1（））；
//var die_2=ParseInt（die.getValue2（））；
//值不会在span上设置文本，因此我们将使用innerText
$（“die_1”）.innerText=pairofDice.getValue1（）；
$（“die_2”）.innerText=pairofDice.getValue2（）；
//算出总数
//var sum=PairofDice.getSum（die_1，die_2）；
var sum=pairofDice.getSum（）；
//在switch语句中，它应该是整数而不是字符串
开关（总和）{
案例2：
specialMsg=“蛇眼”
打破
案例7：
specialMsg=“垃圾”；
打破
案例12：
specialMsg=“盒式车”；
打破
//如果没有特殊信息，我们会添加一条默认消息，因为它会打印“未定义”
违约：
specialMsg=“没有运气”；
}
//显示消息！
$（“消息”）.innerText=specialMsg；
}
var rollDice_c
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;
}

// 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;
}