javascript - HTML が Javascript onclick を呼び出していない

Question

これらのファイルの何が問題なのかを理解するのに苦労しています。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;
}

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

もう 1 つのオプションは、自分が何をすべきかを理解していないということです。その場合はお知らせください。1 対 1 でさらに多くのサポートを受けることができます。

score 0 · Accepted Answer

わかりましたので、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;
}

score 0 · Accepted Answer

roller.js は、roller_library.js が読み込まれる前に実行されるため、roller.js の 1 行目で Die が使用されている場合、Die も PairOfDice も定義されません。したがって、roller.js JavaScript はその時点で失敗して中止され、window.onload 行は実行されません。

javascript - HTML が Javascript onclick を呼び出していない

2 に答える 2

Related

Reference