# Add random fun fact on every re-load

**URL:** <https://zola.discourse.group/t/add-random-fun-fact-on-every-re-load/1243>\
**Category:** Support\
**Created:** [March 24, 2022, 3:25am UTC](https://zola.discourse.group/t/add-random-fun-fact-on-every-re-load/1243 "2022-03-24T03:25:24Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![cadojo](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/cadojo/32/703_2.png) [@cadojo](https://zola.discourse.group/u/cadojo)\
**Post date:** [March 24, 2022, 3:25am UTC](https://zola.discourse.group/t/add-random-fun-fact-on-every-re-load/1243/1 "2022-03-24T03:25:24Z")

</div>

Just found Zola and I love it! I want to add a fun fact in the `lead` class (`adidoks` theme) which shows a different fun fact on every reload.

For reference, I have this set up with simple HTML and Javascript on my current non-zola personal site. [https://jcarpinelli.dev](https://jcarpinelli.dev)

Right now, I’m trying to do this in HTML through `<script>` tags…

```nohighlight
<div class="wrap container" role="document">
  <div class="content">
    <section class="section container-fluid mt-n3 pb-3">
      <div class="row justify-content-center">
        <div class="col-lg-12 text-center">
          <h1 class="mt-0">{{ section.title | default(value="Joe(y) Carpinelli") }}</h1>
          <div class="lead">
            <script>
              let facts = [
                'Our planet\'s sky glows blue!',
                'The Vatican has more popes per capita than anywhere else. ',
                'There are more trees on Earth than stars in the Milky Way. ',
                'Humans consume around 12 billion pounds of coffee per year. ',
                'Earth is the only planet in our solar system with rainbows. ',
                'Modern transisters are smaller than the wavelength of visible light. ',
                'Computers use enough power to throw two pounds across the room every second.',
                'That shooting star you saw could\'ve been astronaut poop! ',
                'In 2008, Norway knighted a penguin named Nils Olav. ',
                'The most money ever paid for a cow in an auction was $1.3 million. ',
                'Every year, about 98% of the atoms in your body are replaced. ',
                'Elephants are the only mammals that can\'t jump. They are also the only mammals with four knees.',
                'American car horns beep in the tone of F.',
                'Cats can hear ultrasound.',
                'The Neanderthal\'s brain was bigger than yours. Sorry.',
                '1 in 5,000 north Atlantic lobsters are born bright blue.'
              ];
              let fact = facts[Math.floor(Math.random() * facts.length)];
              document.querySelector("#lead").innerHTML = "<p>" + fact + "</p>";
            </script>
          </div>
        </div>
        <div class="col-lg-9 col-xl-8 text-center">
          <a class="btn btn-primary btn-lg px-4 mb-2" href="{{ get_url(path=section.extra.url | default(value="/")) | safe }}" role="button">{{ section.extra.url_button | default(value="Get started") }}</a>
          <p class="meta">{{ section.extra.repo_license | default(value="MIT")}} <a href="{{ section.extra.repo_url | default(value="https://github.com/aaranxu/adidoks") | safe }}">{{ section.extra.repo_version | default(value="0.1.0") }}</a></p>
        </div>
      </div>
    </section>
  </div>
</div>

```

I have two questions about this.

1. Can I instead change content randomly in Zola through shortcakes or macros?
2. The HTML code isn’t working (`document.querySelector` returns `null` no matter what class name I give it…), does anyone see any glaring reason why?

---

<div class="post-metadata">

**Author:** ![cadojo](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/cadojo/32/703_2.png) [@cadojo](https://zola.discourse.group/u/cadojo)\
**Post date:** [March 24, 2022, 3:34am UTC](https://zola.discourse.group/t/add-random-fun-fact-on-every-re-load/1243/2 "2022-03-24T03:34:03Z")

</div>

Question 1 is solved by adding `id="lead"` to the `<div` section for `"lead"`.

Question 2 still stands!

---

<div class="post-metadata">

**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\
**Post date:** [March 24, 2022, 12:13pm UTC](https://zola.discourse.group/t/add-random-fun-fact-on-every-re-load/1243/3 "2022-03-24T12:13:11Z")

</div>

That’s really more of a JS question. In practice you have a `lead` class but your select is an id.  
You also want to wait until the document is loaded:

```auto
            <script>
              document.addEventListener("DOMContentLoaded", function() { 
              let facts = [
                'Our planet\'s sky glows blue!',
                'The Vatican has more popes per capita than anywhere else. ',
                'There are more trees on Earth than stars in the Milky Way. ',
                'Humans consume around 12 billion pounds of coffee per year. ',
                'Earth is the only planet in our solar system with rainbows. ',
                'Modern transisters are smaller than the wavelength of visible light. ',
                'Computers use enough power to throw two pounds across the room every second.',
                'That shooting star you saw could\'ve been astronaut poop! ',
                'In 2008, Norway knighted a penguin named Nils Olav. ',
                'The most money ever paid for a cow in an auction was $1.3 million. ',
                'Every year, about 98% of the atoms in your body are replaced. ',
                'Elephants are the only mammals that can\'t jump. They are also the only mammals with four knees.',
                'American car horns beep in the tone of F.',
                'Cats can hear ultrasound.',
                'The Neanderthal\'s brain was bigger than yours. Sorry.',
                '1 in 5,000 north Atlantic lobsters are born bright blue.'
              ];
              let fact = facts[Math.floor(Math.random() * facts.length)];
                console.log(document);
              document.querySelector(".lead").innerHTML = "<p>" + fact + "</p>";
              });
            </script>

```

---

<div class="post-metadata">

**Author:** ![cadojo](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/cadojo/32/703_2.png) [@cadojo](https://zola.discourse.group/u/cadojo)\
**Post date:** [March 25, 2022, 3:30am UTC](https://zola.discourse.group/t/add-random-fun-fact-on-every-re-load/1243/4 "2022-03-25T03:30:53Z")

</div>

Thanks! Is there any way to embed JS in the Zola `{{ ... }} ` syntax?

---

<div class="post-metadata">

**Author:** ![spence](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/spence/32/1022_2.png) [@spence](https://zola.discourse.group/u/spence)\
**Post date:** [March 12, 2023, 9:11am UTC](https://zola.discourse.group/t/add-random-fun-fact-on-every-re-load/1243/5 "2023-03-12T09:11:37Z")

</div>

You can embed JS in zola the same as you would do anything else. The {{ }} syntax goes around variables or expressions. They’re basically things that get generated at the moment zola is building that page. If you already know how your JS will go you can just write it directly in the template, shortcode, or macro that you’re using. If you need part of your JS to change based on some variables, eg title of the page or whatever, then that is a good opportunity to use {{}}. Hope that helps.