document.getElementById()无法正常工作

时间:2018-07-31 01:23:40

标签: javascript

我有20个唯一的随机数,并检查6个唯一的数字之间。 第一次检查有效,但刷新6个唯一数字后,这些数字返回未定义。 我已经给出了完整的代码,以便人们可以修改它。 不需要CSS,仅用于标识不同的数字。

很抱歉长代码,这就是我保持代码整洁的方式。

var num = [];
var com = [];
var s = 0;
var j = 0;

function twenty() {
  for (i = 0; i < 20; i++) {
    com[i] = Math.floor(Math.random() * 49) + 1;
    var x = com.length;
    x = x - 1;
    for (y = 0; y < x; y++) {
      var t1 = com[y];
      var t2 = com[i]
      while (t1 == t2) {
        com[x] = Math.floor(Math.random() * 49) + 1;
        t1 = com[x];
      }
    }
  }
  for (i = 0; i < 5; i++) {
    for (t = 0; t < 4; t++) {
      document.getElementsByClassName(t)[i].innerHTML = com[s];
      s++;
    }
  }
}

function calc() {
  num = [];
  var out = "";
  var z = document.getElementById('max').value;
  for (i = 0; i < z; i++) {
    num[i] = Math.floor(Math.random() * 49) + 1;
    var x = num.length;
    x = x - 1;
    for (y = 0; y < x; y++) {
      var t1 = num[y];
      var t2 = num[i]
      while (t1 == t2) {
        num[x] = Math.floor(Math.random() * 49) + 1;
        t1 = num[x];
      }
    }
    out += num[i] + ", ";
  }
  document.getElementById('num').innerHTML = out;
}

function check() {
  s = 0;
  if (j == 0) {
    for (i = 0; i < 5; i++) {
      for (t = 0; t < 4; t++) {
        var set = 0;
        var test1 = document.getElementsByClassName(t)[i].innerHTML;
        var y = num.length;
        for (x = 0; x < y; x++) {
          var comp = num[x];
          if (test1 == comp) {
            set = 1;
          }
          if (set == 1) {
            document.getElementsByClassName(t)[i].innerHTML = "<input type='button' value = '" + com[s] + "' id='" + s + "' class='yes' >";
          } else if (test1 == undefined) {
            document.getElementsByClassName(t)[i].innerHTML = "undefined";
          } else {
            document.getElementsByClassName(t)[i].innerHTML = "<input type='button' value = '" + com[s] + "' id='" + s + "' class='no' >";
          }

        }
        s++;
      }
    }
    j = 1;
  } else {
    for (i = 0; i < 5; i++) {
      for (t = 0; t < 4; t++) {
        var set = 0;
        var test1 = document.getElementById(s).value;
        var y = num.length;
        for (x = 0; x < y; x++) {
          var comp = num[x];
          if (test1 == comp) {
            set = 1;
          }
          if (set == 1) {
            document.getElementsByClassName(t)[i].innerHTML = "<input type='button' value = '" + com[s] + "' id='" + s + "' class='yes' >";
          } else if (test1 == undefined) {
            document.getElementsByClassName(t)[i].innerHTML = "undefined";
          } else {
            document.getElementsByClassName(t)[i].innerHTML = "<input type='button' value = '" + com[s] + "' id='" + s + "' class='no' >";
          }
        }
        s++;
      }
    }
  }
}
html{

}
input[type=button].yes{
	background: green;
	border: none;
}
input[type=button].no{
	background: red;
	border: none;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
  <script src='code.js'></script>
</head>

<body onload='twenty()'>
  <h1>lottery randomizer</h1>
  <table border='1'>
    <tr>
      <td>randomize numbers
      </td>
      <td>choose number of random numbers
      </td>
    </tr>
    <tr>
      <td>
        <input type='button' onclick='calc()' value='randomize'>
      </td>
      <td>
        <input type='number' value='6' id='max'>
      </td>
    </tr>
  </table>
  <table>
    <tr>
      <td>
        your numbers are:
        <div id='num'>
        </div>
      </td>
    </tr>
  </table>
  <table border='1' class='table'>
    <tr>
      <td>
        <div class='0' id='1'>
        </div>
      </td>
      <td>
        <div class='0' id='2'>
        </div>
      </td>
      <td>
        <div class='0' id='3'>
        </div>
      </td>
      <td>
        <div class='0' id='4'>
        </div>
      </td>
      <td>
        <div class='0' id='5'>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class='1' id='1'>
        </div>
      </td>
      <td>
        <div class='1' id='2'>
        </div>
      </td>
      <td>
        <div class='1' id='3'>
        </div>
      </td>
      <td>
        <div class='1' id='4'>
        </div>
      </td>
      <td>
        <div class='1' id='5'>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class='2'>
        </div>
      </td>
      <td>
        <div class='2'>
        </div>
      </td>
      <td>
        <div class='2'>
        </div>
      </td>
      <td>
        <div class='2'>
        </div>
      </td>
      <td>
        <div class='2'>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class='3' id='1'>
        </div>
      </td>
      <td>
        <div class='3' id='2'>
        </div>
      </td>
      <td>
        <div class='3' id='3'>
        </div>
      </td>
      <td>
        <div class='3' id='4'>
        </div>
      </td>
      <td>
        <div class='3' id='5'>
        </div>
      </td>
    </tr>
  </table>
  <input type='button' onclick='check()' value='check numbers'>
</body>

</html>

0 个答案:

没有答案