Question

我目前正在为一个涉及HTML，JavaScript和CSS的学校项目的网站工作。对于我的网站，我决定做一个骰子滚动模拟，计算然后随机显示骰子图像。问题是代码的JavaScript部分根本无法工作。 load函数中应该更改测试段落中的文本的代码不会执行，这使我认为问题出现在body标签的onload部分。但是，因为我对JavaScript很新，所以我不确定究竟是什么问题或如何解决它。

<!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>

作为参考，骰子图像被称为＆＃39; six1.jpg＆＃39;，＆＃39; six2.jpg＆＃39;，＆＃39; six3.jpg＆＃39;，＆＃39; six4.jpg＆＃39;，＆＃39; six5.jpg＆＃39;，＆＃39; six6.jpg＆＃39;。我还没有添加二十面模具图像。

Answer 1

错字 - die1val1而不是dice1val1

var dice1val = randNum(dicetype);

应该是

var die1val = randNum(dicetype);

＆＃13;

<!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(die1val), '.jpg');
        if (dicenum >= 2) {
          var die2val = randNum(dicetype);
          var die2imgstr = imgstrbase.concat(dicetype, String(die2val), '.jpg');
          if (dicenum == 3) {
            var die3val = randNum(dicetype);
            var die3imgstr = imgstrbase.concat(dicetype, String(die3val), '.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' alt='die1'>
    <img src='diceimages/grey.jpg' id='die2img' alt = 'die2'>
    <img src='diceimages/grey.jpg' id='die3img' alt = 'die3'>
    </body>
</html>

＆＃13;

JavaScript＆＃39; body onload =＆＃39;无法加载功能

1 个答案: