0

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

6 回答 6

1

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

所以，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，你想要文本。最好使用textContent, 或innerText在较旧的 IE（6、7、8）上。如果您不想担心这种跨浏览器的混乱，请使用库来抽象出所有这些。

于 2013-04-08T20:31:17.900 回答
1

你混在一起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-08T20:32:51.690 回答
1

好的，我让它为你工作。我在 JS Fiddle 中有它：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-08T20:44:16.937 回答
0

稍微清理了你的代码，也摆弄了一下：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-08T20:31:24.580 回答
0

这个避免了内联脚本：

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;
}
于 2013-04-08T20:34:10.600 回答
0

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-08T20:50:23.873 回答