Question

我正在为我妻子的一年级课程开发一个移动应用程序，这样他们就可以练习视觉词汇。我是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>

Answer 1

问题是，当浏览器运行JavaScript时，您只评估checkWord一次。

所以，checkWord变量总是“好工作！”。

另一个问题是您在value元素上使用p。 p个元素没有这样的属性。

最后一个问题是您要将2个值与==进行比较。这还不够，因为"" == undefined，undefined是value元素返回的p。

总而言之，您希望每次评估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。如果您不想担心这种跨浏览器的混乱，请使用库来抽象出所有这些。

Answer 2

您混淆了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

Answer 3

好的，我让它为你工作。我有一个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>

你遇到了很多问题。更新的东西需要在功能中。我还删除了最佳实践和更容易调试的全局变量。

（function（）{}）（）;设计模式现在对你来说可能太先进了，但你可以查看闭包或观看保罗爱尔兰谈论jQuery如何工作的视频。你会学到很多东西。还有一本书，我希望在我开始时读到的这本书是Javascript The Good Parts by Crockford。

Answer 4

稍微清理了一下你的代码，也搞砸了：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;
}

Answer 5

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>

JS

//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;
}

Answer 6

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>

比较JavaScript中的两个函数

6 个答案: