JavaScript -- function does not get called

Question

I'd like to make a list about facts. When I click on the button the first fact should be replaced by the second and so on. But it doesn't work. Here is my code:

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

Here is my 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>

But it doesn't work. Could you help me?

Answer 1

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

U are mising a = sign.

Also change href="index.html" to 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 2

My guess is that you're looking for an element before it's created. Change the order:

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

Another option is to use (some changes will be needed):

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

Beyond that you need to change from href="index.html" to href="#", or prevent default behavior.

Answer 3

I think its because of href="index.html", instead use 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

If you open a console, does it say go is not defined? Define it like so:

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

Now it's bound globally and working.

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>

Polluting the global namespace like this is terrible practice—don't do that. This is for test purposes.

The root of the problem is explained in the answers to this question: Uncaught ReferenceError: function is not defined with onclick

There is an entire list of bad stuff happening in this code. You might consider the following:

1. Why href to index.html?
2. Why use the link at all? Use html5 button for that.
3. Why is use strict in the function? (I don't see a reason why.)

Answer 5

I was able to get this to execute by wrapping the javascript in a callback for the DOMContentLoaded listener and making a few changes. This way the DOM is full loaded before the script executes. It ensures that the #myfacts and #click elements are accessible before the script runs. I also changed the <a> into a <button> to avoid being redirected to index.html and moved the onclick registration into the script itself.

Markup:

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