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. 为什么在功能上使用严格？ （我没有看到原因。）