2014-11-21 48 views
0

所以我很高興我從以前的問題中獲得了這張表的幫助;但我遇到了另一個問題。單詞生成器適用於該工具的方式是使用math.random從1-9生成一個隨機數,然後用math.floor將其舍入。然後,這個代碼的function changeRandom()方面抓住這個數字,並根據該數字將數字改爲一個隨機單詞,這樣如果生成的隨機數是3,它就會變成Word 3.現在,我試着去做答案是一樣的,但似乎沒有改變。只有調試控制檯給我的錯誤是gen_nums沒有爲getRandomAnswer()定義,但是當我刪除它時,處理+需要更長的時間,或者有關於最大文件空間的錯誤或其他信息。我需要對單詞選擇器功能做類似的處理以適用於9個框。這是代碼。div innerHTML重寫失敗

注意:代碼中的註釋/註釋可以忽略,因爲它們僅供參考。

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的工作。

回答

0

您提供的代碼有幾件事是不必要的。

  • 就上線,你不需要輸出從getRandomAnswer()分配給「答案」的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();}) 
+0

謝謝,我會爲codepen使用投票,但..代表不是15:P – 2014-11-21 20:35:19

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();

它使函數遞歸。

+0

速度是100%罰款的東西,它只是它實際上並沒有重寫塊div,@elzi數字。我提到gen_nums是因爲我認爲這與重寫有衝突。 – 2014-11-21 18:15:20

+0

我只是告訴你你的JavaScript在做什麼。當你試圖返回一個未定義的變量時,這並不是100%。每次都會出錯。 – elzi 2014-11-21 18:20:29

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你的工作代碼。

+0

速度是100%的事情,它只是它並沒有重寫塊div中的數字@WisdmLabs。我提到gen_nums是因爲我認爲這與重寫有衝突。 – 2014-11-21 18:14:48