Div innerHTML重写失败

时间:2014-11-21 17:43:12

标签: javascript jquery html

所以我很高兴能从我以前的问题中得到这个表格的帮助;但我遇到了另一个问题。单词生成器为该工具工作的方式是使用math.random从1-9生成随机数,然后使用math.floor对其进行舍入。然后,通过它,该代码的function changeRandom()方面抓取该数字,并根据该数字将数字更改为随机字,这样如果生成的随机数为3,它将变为Word 3.现在,我试图为答案做同样的事情,但似乎没有改变。调试控制台只给我一个错误的事情是没有为getRandomAnswer()定义gen_nums,但是当我删除它时,处理需要更长的时间+有关于最大文件空间或其他的错误。我需要使用单词选择器功能完成类似的操作以应用9个框。这是代码。

注意:代码中的注释/注释可以忽略,因为它们仅供参考。

HTML

  <div id="randomizer">
    <div id="wordOutput">
      <div id="output">
        <p id="outputNumber"></p>
      </div>
      <div id="button">
        <!-- This is the button that calls the getRandom() function to create the word. --><button id="myBtn">Randomize!</button><br>
        <caption>Click this button to generate a random word!
        </caption>
        <!-- This is apart of the Randomizer tool, which can be changed to fit the words. It will output the answers based on  -->
        <div id="answers">
          <div class="output1" id="output1"></div>
          <div class="output2" id="output2"></div>
          <div class="output3" id="output3"></div><br>
          <div class="output4" id="output4"></div>
          <div class="output5" id="output5"></div>
          <div class="output6" id="output6"></div><br>
          <div class="output7" id="output7"></div>
          <div class="output8" id="output8"></div>
          <div class="output9" id="output9"></div>
        </div>
      </div>

的JavaScript

/*function playSound()  {

}
*/
/* This section is for the first tool; the Randomizer.*/
/* This is the new function for getting a random number; also used in the getRandomAnswer() function. To select different numbers, adjust the range. */
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('outputNumber').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("outputNumber").innerHTML = "Word 1";
  } else if(x == 2)  {
    document.getElementById("outputNumber").innerHTML = "Word 2";
  } else if(x == 3)  {
    document.getElementById("outputNumber").innerHTML = "Word 3";
  } else if(x == 4)  {
    document.getElementById("outputNumber").innerHTML = "Word 4" 
  } else if(x == 5) {
    document.getElementById("outputNumber").innerHTML = "Word 5"
  }
  else if(x == 6) {
    document.getElementById("outputNumber").innerHTML = "Word 6"
  } 
  else if(x == 7) {
    document.getElementById("outputNumber").innerHTML = "Word 7"
  }
  else if(x == 8) {
    document.getElementById("outputNumber").innerHTML = "Word 8"
  }
  else if(x == 9) {
    document.getElementById("outputNumber").innerHTML = "Word 9"
  }
  else if(x == 10) {
    document.getElementById("outputNumber").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("outputNumber").innerHTML = getRandom(); changeRandom();})
function testFunction()  {
  if(document.getElementById("output1").innerHTML == 3)  {
    document.getElementById("output1").innerHTML = "Three";
  }
  else  {
    document.getElementById("output1").innerHTML = "N3"
  }
}
function getRandomAnswer() {
  var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  var copy = nums.slice();

  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;
  }
  return gen_nums;
  document.getElementById('output' + (i + 1)).innerHTML = getRandomAnswer();
}
function changeRandomAnswer()  {
  /* 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. */
  /* Here's the tutorial for modifying this tool for the possible answers. This tool [by default] has it set to  */
  if(document.getElementById("output1").innerHTML = "1")  {
    document.getElementById("output1").innerHTML = "Answer 1";
  }
  else if(document.getElementById("output1").innerHTML = "2")  {
    document.getElementById("output2").innerHTML = "Answer 2";
  } 
  else if(document.getElementById("output1").innerHTML = "3")  {
    document.getElementById("output3").innerHTML = "Answer 3";
  } 
  else if(document.getElementById("output1").innerHTML = "4")  {
    document.getElementById("output4").innerHTML = "Answer 4" 
  } 
  else if(document.getElementById("output1").innerHTML = "5") {
    document.getElementById("output5").innerHTML = "Answer 5"
  }
  else if(document.getElementById("output1").innerHTML = "6") {
    document.getElementById("output6").innerHTML = "Answer 6"
  } 
  else if(document.getElementById("output1").innerHTML = "7") {
    document.getElementById("output7").innerHTML = "Answer 7"
  }
  else if(document.getElementById("output1").innerHTML = "8") {
    document.getElementById("output8").innerHTML = "Answer 8"
  }
  else if(document.getElementById("output1").innerHTML = "9") {
    document.getElementById("output9").innerHTML = "Answer 9"
  }
  /* 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("answers").innerHTML = getRandomAnswer(); changeRandomAnswer();})

这是一个可行的codepen

3 个答案:

答案 0 :(得分:1)

您有一些范围问题和递归问题。简化:

function foo() {
  var gen_nums = [];

  for ( var i=0; i<10; i++ ) {
    gen_nums.push(i)
  }

  return gen_nums;
}

function bar() {
  var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  var copy = nums.slice();

  return gen_nums;
  bar()
}

console.log(foo()) // [0, ..., 9]
console.log(bar()) // error - gen_nums is not defined

将其从getRandomAnswer()中移除的原因会使事情花费更长的时间,因为当它存在时,函数会在该行停止,而不会到达下一行,这是

document.getElementById('output' + (i + 1)).innerHTML = getRandomAnswer();

使函数递归。

答案 1 :(得分:0)

您的getRandomAnswer功能

function getRandomAnswer() {
  var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  var copy = nums.slice();

  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;
  }
  return gen_nums;
  document.getElementById('output' + (i + 1)).innerHTML = getRandomAnswer();
}

在此,您将在执行某些代码之前返回gen_nums。所以写一下,

function getRandomAnswer() {
  var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  var copy = nums.slice();

  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;
  }
    document.getElementById('output' + (i + 1)).innerHTML = getRandomAnswer();
  return gen_nums;

}

here是您在jsfiddle中的工作代码。

答案 2 :(得分:0)

您提供的代码有一些不必要的东西。

  • 在最后一行,您不需要将 getRandomAnswer()的输出分配给“answers”的innerHTML。函数本身已经在执行操作以将随机数分配给每个输出。您只需调用该功能即可:
    document.getElementById("myBtn").addEventListener("click", function(){ getRandomAnswer(); changeRandomAnswer();})

  • getRandomAnswer()的功能中,您可以删除return gen_numbers;,然后删除该行:
    document.getElementById('output' + (i + 1)).innerHTML = getRandomAnswer();
    这导致递归并且完全没有必要,因为这些数字正好在之前的for循环中应用。


功能 changeRandomAnswer()有一些问题需要解决:

  • 首先,您定义的不是通过使用一个等号(=)而不是两个(==)来比较每个if条件中的innerHTML的内容。
  • 您设置逻辑的方式,它只适用于它匹配的第一个框,并跳过其余部分。您也只是检查“output1”的innerHTML值。

一种解决方案是遍历每个元素并对每个元素运行相同的条件检查:

function changeRandomAnswer()  {

  var answers = document.getElementById("answers");

  for(var i = 0, len = answers.children.length; i < len; i++) {
    var output = answers.children[i];
    var answer = output.innerHTML;

    if(answer == "1")  {
      output.innerHTML = "Answer 1";
    }
    else if(answer == "2")  {
      output.innerHTML = "Answer 2";
    } 
    else if(answer == "3")  {
      output.innerHTML = "Answer 3";
    } 
    else if(answer == "4")  {
      output.innerHTML = "Answer 4" 
    } 
    else if(answer == "5") {
      output.innerHTML = "Answer 5"
    }
    else if(answer == "6") {
      output.innerHTML = "Answer 6"
    } 
    else if(answer == "7") {
      output.innerHTML = "Answer 7"
    }
    else if(answer == "8") {
      output.innerHTML = "Answer 8"
    }
    else if(answer == "9") {
      output.innerHTML = "Answer 9"
    }
    else  {
      output.innerHTML = "Error :c"
    }
  }
}


以下是提及所有编辑的完整javascript(我也在codepen here分叉了一个工作版本):

/*function playSound()  {

}
*/
/* This section is for the first tool; the Randomizer.*/
/* This is the new function for getting a random number; also used in the getRandomAnswer() function. To select different numbers, adjust the range. */
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('outputNumber').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("outputNumber").innerHTML = "Word 1";
  } else if(x == 2)  {
    document.getElementById("outputNumber").innerHTML = "Word 2";
  } else if(x == 3)  {
    document.getElementById("outputNumber").innerHTML = "Word 3";
  } else if(x == 4)  {
    document.getElementById("outputNumber").innerHTML = "Word 4" 
  } else if(x == 5) {
    document.getElementById("outputNumber").innerHTML = "Word 5"
  }
  else if(x == 6) {
    document.getElementById("outputNumber").innerHTML = "Word 6"
  } 
  else if(x == 7) {
    document.getElementById("outputNumber").innerHTML = "Word 7"
  }
  else if(x == 8) {
    document.getElementById("outputNumber").innerHTML = "Word 8"
  }
  else if(x == 9) {
    document.getElementById("outputNumber").innerHTML = "Word 9"
  }
  else if(x == 10) {
    document.getElementById("outputNumber").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("outputNumber").innerHTML = getRandom(); changeRandom();})
function testFunction()  {
  if(document.getElementById("output1").innerHTML == 3)  {
    document.getElementById("output1").innerHTML = "Three";
  }
  else  {
    document.getElementById("output1").innerHTML = "N3"
  }
}
function getRandomAnswer() {
  var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  var copy = nums.slice();

  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;
  }
  //return gen_nums;
  //document.getElementById('output' + (i + 1)).innerHTML = getRandomAnswer();
}
function changeRandomAnswer()  {

  var answers = document.getElementById("answers");

  for(var i = 0, len = answers.children.length; i < len; i++) {
    var output = answers.children[i];
    var answer = output.innerHTML;

    if(answer == "1")  {
      output.innerHTML = "Answer 1";
    }
    else if(answer == "2")  {
      output.innerHTML = "Answer 2";
    } 
    else if(answer == "3")  {
      output.innerHTML = "Answer 3";
    } 
    else if(answer == "4")  {
      output.innerHTML = "Answer 4" 
    } 
    else if(answer == "5") {
      output.innerHTML = "Answer 5"
    }
    else if(answer == "6") {
      output.innerHTML = "Answer 6"
    } 
    else if(answer == "7") {
      output.innerHTML = "Answer 7"
    }
    else if(answer == "8") {
      output.innerHTML = "Answer 8"
    }
    else if(answer == "9") {
      output.innerHTML = "Answer 9"
    }
    else  {
      output.innerHTML = "Error :c"
    }
  }

}
document.getElementById("myBtn").addEventListener("click", function(){ getRandomAnswer(); changeRandomAnswer();})