JavaScript - 函數不會被調用

Question

我想列舉一些事實。當我點擊按鈕時，第一個事實應該被第二個事件替代，等等。但它不起作用。這裏是我的代碼：

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> 

另一種選擇是使用（將需要一些變化）：

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

除此之外，您需要更改從href="index.html"到href="#"，或防止默認行爲。

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="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); 
 
    }

<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，使一些執行變化。這種方式在腳本執行之前完全加載DOM。它確保在腳本運行之前可以訪問#myfacts和#click元素。我還將<a>更改爲<button>，以避免重定向到index.html，並將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. 爲什麼要對index.html href？
2. 爲什麼使用鏈接？使用html5按鈕。
3. 爲什麼在功能上使用嚴格？ （我沒有看到原因。）