HTML

Question

所以我查看了上一个问题的JavaScript问题，并找到了解决问题的方法。但是我需要稍微修改它，但我不确定如何。这是代码的作用。

var nums = [1,2,3,4,5,6,7,8,9,10,11,12];
var gen_nums = [];

function in_array(array, el) {
   for(var i = 0 ; i < array.length; i++) 
       if(array[i] == el) return true;
   return false;
}

function get_rand(array) {
    var rand = array[Math.floor(Math.random()*array.length)];
    if(!in_array(gen_nums, rand)) {
       gen_nums.push(rand); 
       return rand;
    }
    return get_rand(array);
}

for(var i = 0; i < 9; i++) {
    document.write(get_rand(nums));
}

这会生成一个带有12个数字的随机数，而不会重复。然而，我需要它来为9个表盒做这件事。这是我的表格HTML + JavaScript代码。

HTML

<div id="answers">
  <table class="randomizerAnswers">
    <tr id="answerRowOne">
      <td id="answerBoxOne"></td>
      <td id="answerBoxTwo"></td>
      <td id="answerBoxThree"></td>
    </tr>
    <tr id="answerRowTwo">
      <td id="answerBoxFour"></td>
      <td id="answerBoxFive"></td>
      <td id="answerBoxSix"></td>
    </tr>
    <tr id="answerRowThree">
      <td id="answerBoxSeven"></td>
      <td id="answerBoxEight"></td>
      <td id="answerBoxNine"></td>
    </tr>
  </table>
</div>

的JavaScript

function getRandom() {
  var nums = [1,2,3,4,5,6,7,8,9];
  var gen_nums = [];

  function in_array(array, el) {
    for(var i = 0 ; i < array.length; i++) 
      if(array[i] == el) return true;
    return false;
  }

  function get_rand(array) {
    var rand = array[Math.floor(Math.random()*array.length)];
    if(!in_array(gen_nums, rand)) {
      gen_nums.push(rand); 
      return rand;
    }
    return get_rand(array);
  }

  for(var i = 0; i < 9; i++) {
    return (get_rand(nums));
  }
}
function timeOut(){
  /* This can be ignored, as it was a testing function for creating, making, and fixing the randomizer tool, but may change based on creating new tools that need to be troubleshooted. */
  setTimeout (changeRandom, 1);
}
/* This is the function that grabs the innerHTML (what the box says) of the #output1 and changes that number to the word specified. [In example, if the number [randomly] generated was 5, then this function detects that the number was 5 and changes it to Word 5.]  */
function changeRandom()  {
  /* Using the "var x" command, this tells the function that whenever there's an x in the code, it will read it as "document.getElementById('output1').innerHTML", and will grab whatever is inside that #output1 element. */
  var x = document.getElementById('output1').innerHTML
  /* Here's the tutorial for modifying this tool for the possible answers. This tool [by default] has it set to  */
  if(x == 1)  {
    document.getElementById("output1").innerHTML = "Word 1";
  } else if(x == 2)  {
    document.getElementById("output1").innerHTML = "Word 2";
  } else if(x == 3)  {
    document.getElementById("output1").innerHTML = "Word 3";
  } else if(x == 4)  {
    document.getElementById("output1").innerHTML = "Word 4" 
  } else if(x == 5) {
    document.getElementById("output1").innerHTML = "Word 5"
  }
  else if(x == 6) {
    document.getElementById("output1").innerHTML = "Word 6"
  } 
  else if(x == 7) {
    document.getElementById("output1").innerHTML = "Word 7"
  }
  else if(x == 8) {
    document.getElementById("output1").innerHTML = "Word 8"
  }
  else if(x == 9) {
    document.getElementById("output1").innerHTML = "Word 9"
  }
  else if(x == 10) {
    document.getElementById("output1").innerHTML = "Word 10"
  }
  /* If the function is broken [by user modifications], it will output "Error :c", which means the user should check their modifications. */
  else  {
    document.getElementById("output1").innerHTML = "Error :c"
  }
}
document.getElementById("myBtn").addEventListener("click", function(){document.getElementById("output1").innerHTML = getRandom(); changeRandom();})
function getRandomAnswer() {
  var nums = [1,2,3,4,5,6,7,8,9];
  var gen_nums = [];

  function in_array(array, el) {
    for(var i = 0 ; i < array.length; i++) 
      if(array[i] == el) return true;
    return false;
  }

  function get_rand(array) {
    var rand = array[Math.floor(Math.random()*array.length)];
    if(!in_array(gen_nums, rand)) {
      gen_nums.push(rand); 
      return rand;
    }
    return get_rand(array);
  }

  for(var i = 0; i < 9; i++) {
    return(get_rand(nums));
  }
}
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("output1").innerHTML = getRandom(); changeRandom();})

它通常会做的是生成一个像修改一样的数字，因此它适合代码＆amp; HTML，然后changeRandom将使它成为单词。我尝试了一切，我检查了代码，我只是无法弄明白;因为我需要它做同样的事情，但每个不同的盒子没有重复是1个数字。这可能吗？这对我班级的项目是强制性的。

Answer 1

您可以在nums中为每次迭代移除getRandom的值;那样就不会有重复：

function getRandom() {
  var nums = [1,2,3,4,5,6,7,8,9];
  var gen_nums = [];

  function get_rand(array) {
    var i = Math.floor(Math.random()*array.length);
    var rand = array[i];
    gen_nums.push(rand);
    // remove from original array
    nums.splice(i, 1);
  }

  for(var i = 0; i < 9; i++) {
    get_rand(nums);
  }
  return gen_nums;
}

此外，你有太多的返回语句。您无需返回或递归这些函数。

这是函数的小提琴：http://jsfiddle.net/bozdoz/ey0jsy9r/

更新

要回答此答案中的注释，您应该能够在与获得随机数的循环相同的for循环中迭代元素：

    for (var i = 0, len = nums.length; i < len; i++) {
        var j = Math.floor(Math.random() * copy.length);
        var rand = copy[ j ];

        // remove from array
        copy.splice(j, 1);

        // add to output
        document.getElementById('output' + (i + 1)).innerHTML = rand;
    }

新小提琴：http://jsfiddle.net/ey0jsy9r/1/

Answer 2

我不确定我是否清楚你有什么问题。使用您的代码 - 添加后，这将在每个框中以随机数使用您的阵列和填充。（绑定到点击） - 不确定这是否是你正在寻找的，但也许它可以帮助它的一部分。

var nums = [1,2,3,4,5,6,7,8,9,10,11,12];
var gen_nums = [];

function in_array(array, el) {
   for(var i = 0 ; i < array.length; i++) 
       if(array[i] == el) return true;
   return false;
}

function get_rand(array) {
    var rand = array[Math.floor(Math.random()*array.length)];
    if(!in_array(gen_nums, rand)) {
       gen_nums.push(rand); 
       return rand;
    }
    return get_rand(array);
}

function populateTable(){
    // get the table(s)
    var tables = document.getElementsByClassName('randomizerAnswers'); 
// loop though each table 
    for(i=0; i<tables.length;i++){
        // get all rows for that table 
        var table_rows = tables[i].getElementsByTagName('tr');
        // loop though each row in table and get all the td
        for(j=0; j<table_rows.length;j++){
            var td = table_rows[j].getElementsByTagName('td');
            // no loop though each td 
            for(k=0;k<td.length;k++){
                td[k].innerHTML = get_rand(nums);
            }
        }
    }
}

//将您的事件监听器添加到按钮并调用 populateTable（）;

随机数发生器没有重复修改？

HTML

的JavaScript

2 个答案:

更新