問題
あなたuser()関数はパラメータなしで呼ばれることを意味しません、。あなたは一つの引数を期待し、名前xを与えると言う最初の行で
function user(x) {
var element_user = document.getElementById('user');
return element_user.innerHTML = x;
}
- ：
だが詳細に機能を確認してみましょう。パラメータを指定しないで関数を呼び出すと、xは未定義になります。
- 2行目では、
#user要素を探して、それをローカル変数に割り当てます。これは問題ありません。
は今、あなたは基本的には、1行に二つのことをやっている：あなたも何をしているinnerHTMLのはundefinedをすることになりますが、引数を渡すことはありませんwinner()内からこの関数を、
element_user.innerHTML = x;
return element_user.innerHTML;
を呼び出すときあなたは結果を見ている。関数を呼び出す代わりに、要素自体から結果を取得することもできます。
別の問題は、winner()からのwinner()への呼び出しであり、返されることはありません。これは、関数が制限に達してブラウザが停止するまで再帰的に呼び出しているためです。
これらの2つの問題で
が固定迅速な解決策は、あなたのコードは次のようになります。
function user(x) {
var element_user = document.getElementById('user');
return element_user.innerHTML = x;
}
function enemy() {
random_number = Math.ceil(Math.random() * 3);
if (random_number == 1) {
random_number = "Stein";
} else if (random_number == 2) {
random_number = "Schere";
} else {
random_number = "Papier";
}
var element_enemy = document.getElementById('enemy');
return element_enemy.innerHTML = random_number;
}
function winner() {
var userChoice = document.getElementById('user').innerHTML;
console.log(userChoice);
console.log(random_number);
if (userChoice === 'Stein' && random_number === 'Schere') {
return "User hat gewonnen!";
} else if (userChoice === 'Stein' && random_number === 'Papier') {
return "Enemy hat gewonnen!";
} else if (userChoice === 'Schere' && random_number === 'Stein') {
return "Enemy hat gewonnen!";
} else if (userChoice === 'Schere' && random_number === 'Papier') {
return "User hat gewonnen!";
} else if (userChoice === 'Papier' && random_number === 'Stein') {
return "User hat gewonnen!";
} else if (userChoice === 'Papier' && random_number === 'Schere') {
return "Enemy hat gewonnen!";
} else {
return "Unentschieden!";
}
}
function writeResult() {
var winner_element = document.getElementById('winner');
winner_element.innerHTML = winner();
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>S+S+P</title>
</head>
<body>
<p id="user"></p>
<p id="enemy"></p>
<button onclick="user('Stein'), enemy();">Stein</button>
<button onclick="user('Schere'), enemy();">Schere</button>
<button onclick="user('Papier'), enemy();">Papier</button>
<p id="winner"></p>
<button onclick="writeResult();">Gewinner</button>
<script src="game.js"></script>
</body>
</html>
それは動作しますが、それでも多くのバグがあり、におい：
- 機能の名前が不正であり、文書化されていません。それらの機能は推測するのが難しいです。
- グローバル変数が関数から漏れています。
/**
* Sets the given user choice as html text on the #userOutput element.
*/
function setUserChoice(choice) {
document.getElementById('userOutput').innerHTML = choice;
}
/**
* Choses a random choice for the enemy and sets it as html on the
* #enemyOutput element. Possible outputs are "Stein", "Schere" and "Paper".
*/
function setRandomEnemyChoice() {
var enemyPossibleChoices = ["Stein", "Schere", "Papier"];
var enemyChoiceNum = Math.floor(Math.random() * 3);
var enemyChoice = enemyPossibleChoices[enemyChoiceNum];
document.getElementById('enemyOutput').innerHTML = enemyChoice;
}
/**
* Given two strings where each is one of "Stein", "Schere" or "Paper",
* determines the winner and returns the result of the match as string.
*/
function determineWinner(userChoice, enemyChoice) {
if (userChoice === 'Stein' && enemyChoice === 'Schere') {
return "User hat gewonnen!";
} else if (userChoice === 'Stein' && enemyChoice === 'Papier') {
return "Enemy hat gewonnen!";
} else if (userChoice === 'Schere' && enemyChoice === 'Stein') {
return "Enemy hat gewonnen!";
} else if (userChoice === 'Schere' && enemyChoice === 'Papier') {
return "User hat gewonnen!";
} else if (userChoice === 'Papier' && enemyChoice === 'Stein') {
return "User hat gewonnen!";
} else if (userChoice === 'Papier' && enemyChoice === 'Schere') {
return "Enemy hat gewonnen!";
} else {
return "Unentschieden!";
}
}
/**
* Gathers the user and enemy choices, and uses them to determine the
* result of the match. The result is then written as html to
* #resultOutput.
*/
function writeResult() {
var userChoice = document.getElementById('userOutput').innerHTML;
var enemyChoice = document.getElementById('enemyOutput').innerHTML;
var resultText = determineWinner(userChoice, enemyChoice);
document.getElementById('resultOutput').innerHTML = resultText;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>S+S+P</title>
</head>
<body>
<p id="userOutput"></p>
<p id="enemyOutput"></p>
<button onclick="setUserChoice('Stein'); setRandomEnemyChoice();">Stein</button>
<button onclick="setUserChoice('Schere'); setRandomEnemyChoice();">Schere</button>
<button onclick="setUserChoice('Papier'); setRandomEnemyChoice();">Papier</button>
<p id="resultOutput"></p>
<button onclick="writeResult();">Gewinner</button>
<script src="game.js"></script>
</body>
</html>
：あなたはドイツ語と英語の混合され
- ...
リファクタリングは反復1
私自身は少しのコードをクリーンアップすることができました
ご覧のとおり、メソッド名とIDはもう少し明確です。リファクタリングの次のステップでは、要素にバインドされた文字列ではなく、1つのグローバルオブジェクトでより良い状態保存を導入できます。選択肢はおそらく文字列表現の定数でなければなりません。したがって、SCISSORS,STONE、PAPERというコードで作業し、必要に応じてドイツ語の文字列を出力します。 if..elseの構造は、すでに述べたように大幅に単純化することができます。私は反復2をあなたに残します:-)
幸運。
小さなヒント、 'return'の後に' else'は必要ありません。 'if'を続けるだけです。 –