JavaScript - 関数が呼び出されない

Question

私は事実についてのリストを作りたいと思います。ボタンをクリックすると、最初のファクトは2番目のファクトに置き換えられます。しかし、それは動作しません。ここに私のコードは次のとおりです。ここで

var facts = ['1. ', '2. ', '3. ', '4. ']; 

var print = document.getElementById('myfacts'); 
print.innerHTML = facts[0]; 

var i = 1; 

function go() { 
    'use strict'; 
    print.innerHTML = facts[i]; 
    i = (i + 1) % (facts.length); 
} 

は私のHTMLです：

<section id="fakten"> 
    <div class="facts"> 
    <h1>My 4 facts</h1> 
    <script src="facts.js"></script> 
    <p id="myfacts" class="myfacts"></p> 
    <a id="click" href="index.html" onclick="go();">Next</a> 
    </div> 
</section> 

しかし、それは動作しません。私たちを手伝ってくれますか？

Answer 1

私の推測では、それが作成されます前に要素を探しているということです。順序を変更します。

<p id="myfacts" class="myfacts"></p> 
<script src="facts.js"></script> 

別のオプションは、（いくつかの変更が必要になります）を使用することです：あなたはhref="index.html"からhref="#"に変更するか、デフォルトの動作を防ぐために必要とされる以上

document.addEventListener("DOMContentLoaded", function(event) { 
    // you code 
} 

を。

Answer 2

<script src="facts.js"></script> 

Uは、=という記号を付けています。

さらにhref="index.html"からhref="#"に変更してください。

var facts = ["1. ", "2. ", "3. ", "4. "]; 
 

 
    var i = 1; 
 
    var print = document.getElementById('myfacts'); 
 

 
    print.innerHTML = facts[0]; 
 

 
    function go() { 
 
     "use strict"; 
 
     print.innerHTML = facts[i]; 
 
     i = (i + 1) % (facts.length); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<section id="fakten"> 
 
    <div class="facts"> 
 
     <h1>My 4 facts</h1> 
 
     <script src="facts.js"></script> 
 
     <p id="myfacts" class="myfacts"></p> 
 
     <a id="click" href="#" onclick="go();">Next</a> 
 
    </div> 
 
</section>

Answer 3

私が代わりにhref="#"

var facts = ["1. ", "2. ", "3. ", "4. "]; 
 

 
    var i = 1; 
 
    var print = document.getElementById('myfacts'); 
 

 
    print.innerHTML = facts[0]; 
 

 
    function go() { 
 
     "use strict"; 
 
     print.innerHTML = facts[i]; 
 
     i = (i + 1) % (facts.length); 
 
    }

<section id="fakten"> 
 
    <div class="facts"> 
 
     <h1>My 4 facts</h1> 
 
     <script src="facts.js"></script> 
 
     <p id="myfacts" class="myfacts"></p> 
 
     <a id="click" href="#" onclick="go();">Next</a> 
 
    </div> 
 
</section>

Answer 4

を使用し、私はDOMContentLoadedリスナーのコールバックではJavaScriptをラップし、いくつかを行うことによって実行するために、これを取得することができた、そのためhref="index.html"を考えます変更。これにより、スクリプトが実行される前にDOMがフルロードされます。これにより、スクリプトが実行される前に#myfactsと#clickの要素にアクセスできるようになります。 index.htmlにリダイレクトされないように<a>を<button>に変更し、onclick登録をスクリプト自体に移動しました。

マークアップ：

<section id="fakten"> 
    <div class="facts"> 
     <h1>My 4 facts</h1> 
     <script src="./js.js"></script> 
     <p id="myfacts" class="myfacts"></p> 
     <button id="click">Next</button> 
    </div> 
</section> 

Javscript：

document.addEventListener("DOMContentLoaded", function(event) { 
    var facts = ["1. ", "2. ", "3. ", "4. "]; 
    var i = 1; 

    var print = document.getElementById('myfacts'); 
    var button = document.getElementById('click'); 

    button.onclick = function() { 
     "use strict"; 
     print.innerHTML = facts[i]; 
     i = (i + 1) % (facts.length); 
    } 

    print.innerHTML = facts[0]; 
}); 

Answer 5

コンソールを開くと、それは行くが定義されていないと言うのですか？それを次のように定義します。

go = function() { 
     print.innerHTML = facts[i]; 
     i = (i + 1) % (facts.length); 
} 

これはグローバルにバインドされ、動作しています。このようなグローバルな名前空間を汚染

var facts = ["1. ", "2. ", "3. ", "4. "]; 
 

 
    var i = 1; 
 
    var print = document.getElementById('myfacts'); 
 

 
    print.innerHTML = facts[0]; 
 

 
    go = function() { 
 
     "use strict"; 
 
     print.innerHTML = facts[i]; 
 
     i = (i + 1) % (facts.length); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<section id="fakten"> 
 
    <div class="facts"> 
 
     <h1>My 4 facts</h1> 
 
     <script src="facts.js"></script> 
 
     <p id="myfacts" class="myfacts"></p> 
 
     <a id="click" href="#" onclick="go();">Next</a> 
 
    </div> 
 
</section>

は—はそれをしないひどいやり方です。これはテスト目的です。

問題の根本は、この質問への回答で説明されています。Uncaught ReferenceError: function is not defined with onclick

このコードで起こって悪いものの全体リストがあります。次の点を考慮する必要があります。

1. なぜhref to index.htmlですか？
2. なぜリンクを使用するのですか？それにはhtml5ボタンを使います。
3. 機能でuse strictが使用されるのはなぜですか？ （理由はわかりません）