0

妻が 1 年生のクラスでサイト ワードを練習できるように、モバイル アプリを開発しています。私は JavaScript の初心者ですが、JavaScript 配列を取得してそこからランダムな単語を抽出するという最初の目的を達成することができました。私の 2 番目の目的は、ユーザーに表示された単語を入力させ、ボタンをクリックして、入力した単語をランダムな単語と比較させることです。2 番目の関数でこれを実行しようとしましたが、実行されませんでした。コンソールにエラーが表示されないので、これを機能させる方法が少しわかりません。私と 1 年生の素晴らしいグループには、どんな助けでも大歓迎です。ここに私がこれまでに持っているコードがあります。

<!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

さて、私はあなたのためにそれを働かせました。私は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>

あなたはたくさんの問題を抱えていました。更新するものは関数にある必要があります。ベスト プラクティスと簡単なデバッグのために、グローバル変数も削除しました。

関数（） {}）（）; 設計パターンは今のあなたには高度すぎるかもしれませんが、クロージャを調べたり、ポール アイリッシュが jQuery のしくみについて話しているビデオを見ることができます。あなたは多くを学ぶでしょう。また、Crockford の Javascript The Good Parts という本は、私が始めたときに読みたかった本です。

于 2013-04-08T20:44:16.937 に答える
1

問題はcheckWord、ブラウザが JavaScript を実行するときに 1 回しか評価していないことです。

したがって、checkWord変数は常に「Nice Job!」です。

別の問題は、要素で使用valueしていることです。要素にはそのようなプロパティはありません。pp

そして最後の問題は、2 つの値を と比較していることです==。要素が返すものであるため"" == undefined、それだけでは十分ではありません。undefinedvaluep

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

最後に 1 つ: 私はinnerHTMLそこで使用していますが、悪いです。HTML ではなく、テキストが必要です。textContent、またはinnerText古い IE (6、7、8)を使用することをお勧めします。この種のクロスブラウザーの混乱を心配したくない場合は、ライブラリを使用してこれらすべてを抽象化してください。

于 2013-04-08T20:31:17.900 に答える
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 に答える