在JavaScript中比較兩個函數

我正在爲我妻子的一年級開發移動應用程序，以便他們可以練習視覺單詞。我是JavaScript的新手，但我能夠實現我的第一個目標，即獲取JavaScript數組並從中提取一個隨機單詞。我的第二個目標是讓用戶鍵入他們看到的單詞，單擊一個按鈕並將他們輸入的單詞與隨機單詞進行比較。我試圖用第二個函數做這件事，但它沒有做到這一點。我沒有在控制檯中發現任何錯誤，所以我在如何使這個工作方面有點失落。任何幫助將非常感謝我和一大羣一年級學生。這是我迄今爲止的代碼。在JavaScript中比較兩個函數

<!DOCTYPE html> 
<html> 
<body> 
<h1>Practice Spelling Test</h1> 
<p id="aWord"></p> 

<input id="yourTurn"> 

<button onclick="myFunction()">New Word</button> 
<button onclick="checkSpelling()">Check My Spelling</button> 

<p id="result"></p> 

<script> 

var sightWord = ["hoof", "hook", "shook", "hood", "wood", "took", "book", "good", "food", "mood", "look"]; 
var yourTurn = document.getElementById("yourTurn").value; 
var aWord = document.getElementById("aWord").value; 
var checkWord = (yourTurn == aWord)?"Nice Job!":"So close! Try again!"; 

function myFunction() { 
    var showWord = sightWord[Math.floor((Math.random()*10)+1)]; 
    aWord.innerHTML = showWord; 
} 

function checkSpelling(result) { 
    document.getElementById("result").innerHTML=checkWord; 
} 

</script> 

</body> 
</html>

來源

2013-04-08 Chris Christensen

你混了value和innerHTML。

value用於input和textarea元素和innerHTML是幾乎其他元素

該代碼會爲你工作：

<!DOCTYPE html> 
<html> 
<body> 
<h1>Practice Spelling Test</h1> 
<p id="aWord"></p> 

<input id="yourTurn"> 

<button onclick="myFunction()">New Word</button> 
<button onclick="checkSpelling()">Check My Spelling</button> 

<p id="result"></p> 

<script> 

var sightWord = ["hoof", "hook", "shook", "hood", "wood", "took", "book", "good", "food", "mood", "look"]; 
var yourTurn = document.getElementById("yourTurn"); 
var aWord = document.getElementById("aWord"); 


function myFunction() { 
    var showWord = sightWord[Math.floor((Math.random()*10)+1)]; 
    aWord.innerHTML = showWord; 
} 

function checkSpelling(result) { 

    var checkWord = (yourTurn.value == aWord.innerHTML)?"Nice Job!":"So close! Try again!"; 
    document.getElementById("result").innerHTML=checkWord; 
} 

</script> 

</body> 
</html>

查看即時代碼在這裏：http://jsbin.com/ubofus/1/edit

來源

2013-04-08 20:32:51 Mohsen

謝謝！我非常感謝幫助和鏈接到jsbin，以便在行動中看到它！ – 2013-04-08 20:42:43

問題是，當瀏覽器運行JavaScript時，您只會評估checkWord一次。

因此，checkWord變量總是「很好的工作！」。

另一個問題是，您在p元素上使用value。 p元素沒有這樣的屬性。

而最後一個問題是您將2個值與==進行比較。這是不夠的，因爲"" == undefined,undefined是p元素返回的value。

總結一下，你想每次評估checkWord，你想比較蘋果和蘋果。這將導致這種代碼：

function checkSpelling(result) { 
    var yourTurn = document.getElementById("yourTurn").value; 
    var aWord = document.getElementById("aWord").innerHTML; 
    var checkWord = (yourTurn == aWord)?"Nice Job!":"So close! Try again!"; 
    document.getElementById("result").innerHTML=checkWord; 
}

最後一件事：我使用innerHTML存在，但它是不好的。你不想HTML，你想要的文字。在較舊的IE（6,7,8）上使用textContent或innerText會更好。如果你不想擔心這種跨瀏覽器的混亂，使用一個庫來抽象掉所有這些。

來源

2013-04-08 20:31:17

'innerHTML'不壞。無論如何，OP都完全控制着元素。他們專門設置'innerHTML'，因此稍後恢復是'安全'的。 – Ian 2013-04-08 20:32:55

盪滌你的代碼一點點，也撥弄：http://jsfiddle.net/3Ptzu/

var sightWord = ["hoof", "hook", "shook", "hood", "wood", "took", "book", "good", "food", "mood", "look"]; 

var yourTurn = document.getElementById("yourTurn").value; 
var aWord = document.getElementById("aWord").value; 


function myFunction() { 
    var showWord = sightWord[Math.floor((Math.random()*10)+1)]; 
    document.getElementById("aWord").innerHTML = showWord; 
} 

function checkSpelling(result) { 
    var challengeWord = document.getElementById("aWord").innerHTML; 
    var checkWord = document.getElementById("yourTurn").value; 

    var result = (challengeWord == checkWord) ? "Nice Job!":"So close! Try again!"; 
    document.getElementById("result").innerHTML = result; 
}

來源

2013-04-08 20:31:24 tymeJV

This one avoids inline scripts：

HTML

<h1>Practice Spelling Test</h1> 

<p id="aWord"></p> 
<input id="yourWord"> 
<button id="newWord">New Word</button> 
<button id="spellCheck">Check My Spelling</button> 
<p id="result"></p>

//list of words 
var sightWord = ["hoof", "hook", "shook", "hood", "wood", "took", "book", "good", "food", "mood", "look"]; 
//variable containing the current word 
var currentWord; 
//reference to the "congrats" box 
var result = document.getElementById('result'); 
//reference to the input 
var yourWord = document.getElementById('yourWord'); 

//when new word is clicked 
document.getElementById('newWord').onclick = function() { 
    //get a new word from the list 
    aWord.innerHTML = currentWord = sightWord[Math.floor((Math.random() * 10) + 1)]; 
} 

//when spell check is clicked 
document.getElementById('spellCheck').onclick = function() { 
    //compare and announce accordingly 
    var check = (yourWord.value === currentWord) ? "Nice Job!" : "So close! Try again!"; 
    result.innerHTML = check; 
}

來源

2013-04-08 20:34:10 Joseph

好吧，我得到它爲你工作。我有一個JS小提琴：http://jsfiddle.net/D6ERg/4/

<!DOCTYPE html> 
<html> 
<body> 
<h1>Practice Spelling Test</h1> 
<p id="aWord"></p> 

<input id="yourTurn"> 

<button onclick="window.wordApp.newWord()">New Word</button> 
<button onclick="window.wordApp.checkSpelling()">Check My Spelling</button> 

<p id="result"></p> 

<script> 

window.wordApp = (function() { 
    var sightWord = ["hoof", "hook", "shook", "hood", "wood", "took", "book", "good", "food", "mood", "look"]; 
    var aWord = document.getElementById("aWord"); 

    return { 
     newWord : function() { 
      var showWord = sightWord[Math.floor((Math.random()*10)+1)]; 
      aWord.innerText = showWord; 
     }, 
     checkSpelling : function() { 
      var yourTurn = document.getElementById("yourTurn").value; 
      var checkWord = (yourTurn == aWord.innerText)?"Nice Job!":"So close! Try again!"; 
      document.getElementById("result").innerHTML=checkWord; 

     } 
    } 

})(); 
</script> 

</body> 
</html>

你有很多問題。更新的東西需要在功能上。我還刪除了全局變量以獲得最佳實踐和更容易的調試。

的（函數（）{}）（）;設計模式現在可能對你來說太過先進，但你可以查看閉包或觀看Paul Irish談論jQuery如何工作的視頻。你會學到很多東西。另外，Crockford的Javascript The Good Parts這本書是我希望在開始時閱讀的一本書。

來源

2013-04-08 20:44:16

感謝您的幫助和建議。我很感激。我致力於更好地使用Javascript。 – 2013-04-10 22:56:01

有innerHTML和value之間的差值; value實際上是input標籤的屬性。這裏是一個跨瀏覽器的方式來處理這個，沒有任何內聯JavaScript：

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
    <head> 
     <title>Practice Spelling Test</title> 
     <meta charset="UTF-8" /> 
     <script> 
      (function(d){ 
       var modern = (d.addEventListener) ? true : false, load = function(fn){ 
        if(modern) { 
         d.addEventListener("DOMContentLoaded", fn, false); 
        } else { 
         d.attachEvent("onreadystatechange", function(){ 
          if(d.readyState === "complete") { 
           fn(); 
          } 
         }); 
        } 
       }, event = function(obj, evt, fn){ 
        if(modern) { 
         obj.addEventListener(evt, fn, false); 
        } else { 
         obj.attachEvent("on" + evt, fn); 
        } 
       }, init = function(){ 
        var sightWord = ["hoof", "hook", "shook", "hood", "wood", "took", "book", "good", "food", "mood", "look"], newWordButton = d.getElementById("newWord"), checkSpellButton = d.getElementById("checkSpell"), aWord = d.getElementById("aWord"), yourTurn = d.getElementById("yourTurn"), result = d.getElementById("result"), lastWord = null, newWord = function(){ 
         var count = Math.floor(Math.random()*(sightWord.length - 1)); 
         if(count == lastWord) { 
          newWord(); 
         } else { 
          aWord.innerHTML = sightWord[count]; 
          lastWord = count; 
         } 
        }, checkSpell = function(){ 
         var curr = aWord.innerHTML, input = yourTurn.value; 
         if(curr && input) { 
          result.innerHTML = (curr == input) ? "Nice Job!" : "So close! Try again!"; 
         } 
        }; 
        event(newWordButton, "click", newWord); 
        event(checkSpellButton, "click", checkSpell); 
       }; 
       load(init); 
      })(document); 
     </script> 
    </head> 
    <body> 
     <h1>Practice Spelling Test</h1> 
     <p id="aWord">&nbsp;</p> 
     <input id="yourTurn" type="text" /> 
     <button id="newWord">New Word</button> 
     <button id="checkSpell">Check My Spelling</button> 
     <p id="result"></p> 
    </body> 
</html>

來源

2013-04-08 20:50:23 faino

在JavaScript中比較兩個函數

回答

相關問題