0
私は現在、HTML、JavaScript、およびCSSを含む学校プロジェクトのWebサイトで作業しています。私のウェブサイトでは、サイコロのシミュレーションを行い、サイコロの画像をランダムに表示することにしました。問題は、コードのJavaScript部分がまったく機能しないことです。テスト段落内のテキストを変更するはずのロード関数内のコードは実行されません。このため、bodyタグのonload部分で問題が発生していると考えられます。しかし、私はJavaScriptをかなり使い慣れているので、正確な問題が何であるか、修正する方法がわかりません。参考JavaScript 'body onload ='は関数の読み込みに失敗します
<!DOCTYPE html>
<html>
<head>
<link href='style.css' rel='stylesheet' type='text/css'/>
<meta charset='utf-8'/>
<script>
function loadFunction() {
document.getElementById('rolldice').onclick = rollDice;
document.getElementById('test').innerHTML = 'works';
}
function rollDice() {
var imgstrbase = 'diceimages/'
var dicenum = document.getElementById('numselect').value;
var dicetype = document.getElementById('diceselect').value;
var die1val = randNum(dicetype);
var die1imgstr = imgstrbase.concat(dicetype, String(dice1val), '.jpg');
if (dicenum >= 2) {
var die2val = randNum(dicetype);
var die2imgstr = imgstrbase.concat(dicetype, String(dice2val), '.jpg');
if (dicenum == 3) {
var die3val = randNum(dicetype);
var die3imgstr = imgstrbase.concat(dicetype, String(dice3val), '.jpg');
} else {
var die3imgstr = 'diceimages/grey.jpg';
}
} else {
var die2imgstr = 'diceimages/grey.jpg';
}
document.getElementById('die1img').src = die1imgstr;
document.getElementById('die2img').src = die2imgstr;
document.getElementById('die3img').src = die3imgstr;
}
function randNum(num) {
return Math.floor(Math.random() * num) + 1;
}
</script>
</head>
<body onload='loadFunction();'>
<p id='test'> original </p>
<h1> Dice Roll! </h1>
<form id='numselect'>
<input type='radio' name='list1' value=1 checked> One <br>
<input type='radio' name='list1' value=2> Two <br>
<input type='radio' name='list1' value=3> Three <br>
</form>
<button id='rolldice' type='button'> Roll Dice </button>
<form id='diceselect'>
<input type='radio' name='list2' value='six' checked> Six-Sided <br>
<input type='radio' name='list2' value='twenty'> Twenty-Sided <br>
</form>
<img src='diceimages/grey.jpg' id='die1img'>
<img src='diceimages/grey.jpg' id='die2img'>
<img src='diceimages/grey.jpg' id='die3img'>
</body>
</html>
ダイス画像が 'six1.jpg'、 'six2.jpg'、 'six3.jpg'、 'six4.jpg'、 'six5.jpg'、及び 'six6.jpg' と呼ばれています。私はまだ20面のダイ画像を追加していない。
する必要があります 'dice1val'は何ですか？ – brk
'document.getElementById（ 'rolldice'）.onclick = rollDice（）;'かっこは必須です – Arunava