# How to put a random field inside a div with a script?

**URL:** <https://forums.ankiweb.net/t/how-to-put-a-random-field-inside-a-div-with-a-script/21508>\
**Category:** Card Design\
**Created:** [July 16, 2022, 2:33pm UTC](https://forums.ankiweb.net/t/how-to-put-a-random-field-inside-a-div-with-a-script/21508 "2022-07-16T14:33:02Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![bkztei](https://avatars.discourse-cdn.com/v4/letter/b/3be4f8/32.png) [@bkztei](https://forums.ankiweb.net/u/bkztei)\
**Post date:** [July 16, 2022, 2:33pm UTC](https://forums.ankiweb.net/t/how-to-put-a-random-field-inside-a-div-with-a-script/21508/1 "2022-07-16T14:33:02Z")

</div>

Hello.  
I have 5 fields with different sentences called `Sentece1`, `Sentece2`, `Sentece3`, `Sentece4` and `Sentece5`.

I need to write a script that displays only one random field inside the `div` with `id="sentence"` based on the randomly generated number (from 1 to 5).

```auto
<div id="sentence"></div>

```

Neither of these scripts works:

```auto
<script>
	number = 2; //some random number
	sentence = `{{Sentence${number}}}`;
	document.getElementById('sentence').innerHTML = sentence;
</script>

```

```auto
<script>
	number = 2; //some random number
	sentence = '{{Sentence' + number + '}}';
	document.getElementById('sentence').innerHTML = sentence;
</script>

```

How to fix it? Am I doing something wrong?

---

<div class="post-metadata">

**Author:** ![ODeer](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/odeer/32/10217_2.png) [@ODeer](https://forums.ankiweb.net/u/ODeer)\
**Post date:** [July 16, 2022, 3:33pm UTC](https://forums.ankiweb.net/t/how-to-put-a-random-field-inside-a-div-with-a-script/21508/2 "2022-07-16T15:33:22Z")

</div>

I reckon the problem with your script is that Anki tries to replace the expression in brackets with a field value before the javascript is run. Thus, the field doesn’t exist (yet). But I’m still new to js and very hazy on the internals of Anki as well, so there may well be a better solution.

I don’t see any reason why the following shouldn’t work for you, but I’d be interested in using a more elegant solution myself as well.

```auto
<div class="sentence" hidden>{{Sentence1}}</div>
<div class="sentence" hidden>{{Sentence2}}</div>
<div class="sentence" hidden>{{Sentence3}}</div>

<script>

	const fields = [...document.querySelectorAll(".sentence")];

	function randomInt(max) {
		return Math.floor(Math.random() * max);
	}		
	rand = randomInt(fields.length)

	fields[rand].hidden = false;

</script>

```

&nbsp;

Do you need to show the same random sentence on both sides of the card? It’s possible but obviously less straightforward than the code above.

---

<div class="post-metadata">

**Author:** ![bkztei](https://avatars.discourse-cdn.com/v4/letter/b/3be4f8/32.png) [@bkztei](https://forums.ankiweb.net/u/bkztei)\
**Post date:** [July 16, 2022, 4:54pm UTC](https://forums.ankiweb.net/t/how-to-put-a-random-field-inside-a-div-with-a-script/21508/3 "2022-07-16T16:54:32Z")

</div>

Thanks. But for some reason, I can’t make your script to run on the back of the card. None of the hidden fields are being revealed with any number I try to use. Your script works only on the front side of the card but not on the back. Does it work for you on both sides?

---

<div class="post-metadata">

**Author:** ![ODeer](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/odeer/32/10217_2.png) [@ODeer](https://forums.ankiweb.net/u/ODeer)\
**Post date:** [July 16, 2022, 4:59pm UTC](https://forums.ankiweb.net/t/how-to-put-a-random-field-inside-a-div-with-a-script/21508/4 "2022-07-16T16:59:21Z")

</div>

> [@bkztei](#):
>
> Does it work for you on both sides?

At first glance I don’t know why it wouldn’t, I can have a look tomorrow.

In the meantime, it could help if you posted your complete html for front and back. Maybe something else is causing the issue.

---

<div class="post-metadata">

**Author:** ![bkztei](https://avatars.discourse-cdn.com/v4/letter/b/3be4f8/32.png) [@bkztei](https://forums.ankiweb.net/u/bkztei)\
**Post date:** [July 16, 2022, 5:07pm UTC](https://forums.ankiweb.net/t/how-to-put-a-random-field-inside-a-div-with-a-script/21508/5 "2022-07-16T17:07:22Z")

</div>

The code for the front and back sides are absolutely the same:

```auto
{{type:Word}}
{{Definition}}

<br><br>

<div class="sentence" hidden>{{Sentence1}}</div>
<div class="sentence" hidden>{{Sentence2}}</div>
<div class="sentence" hidden>{{Sentence3}}</div>
<div class="sentence" hidden>{{Sentence4}}</div>
<div class="sentence" hidden>{{Sentence5}}</div>

<script>
	const fields = document.querySelectorAll(".sentence");
	fields[3].hidden = false;
</script>

```

In this case, `Sentence4` is being revealed on the front but not on the back.

---

<div class="post-metadata">

**Author:** ![ODeer](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/odeer/32/10217_2.png) [@ODeer](https://forums.ankiweb.net/u/ODeer)\
**Post date:** [July 16, 2022, 5:14pm UTC](https://forums.ankiweb.net/t/how-to-put-a-random-field-inside-a-div-with-a-script/21508/6 "2022-07-16T17:14:25Z")

</div>

> [@bkztei](#):
>
> ```auto
> <script>
> const fields = document.querySelectorAll(".sentence");
> fields[3].hidden = false;
> </script>
> 
> ```

You see, it’s because I’m a bit of plank. Wrap your script in curly brackets, then it should reload every time.

---

<div class="post-metadata">

**Author:** ![bkztei](https://avatars.discourse-cdn.com/v4/letter/b/3be4f8/32.png) [@bkztei](https://forums.ankiweb.net/u/bkztei)\
**Post date:** [July 16, 2022, 5:17pm UTC](https://forums.ankiweb.net/t/how-to-put-a-random-field-inside-a-div-with-a-script/21508/7 "2022-07-16T17:17:08Z")

</div>

Thanks a lot. It helped. But why do we need to use curly braces there?

---

<div class="post-metadata">

**Author:** ![ODeer](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/odeer/32/10217_2.png) [@ODeer](https://forums.ankiweb.net/u/ODeer)\
**Post date:** [July 16, 2022, 5:25pm UTC](https://forums.ankiweb.net/t/how-to-put-a-random-field-inside-a-div-with-a-script/21508/8 "2022-07-16T17:25:34Z")

</div>

> [@ODeer](#):
>
> I’m still new to js

Unfortunately, this is key… but if I find out I’ll let you know. I have a hunch, but I don’t want to spread misinformation.

I see @kleinerpirat has been lurking. Maybe has a better technical explanation^^

---

<div class="post-metadata">

**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [July 16, 2022, 5:33pm UTC](https://forums.ankiweb.net/t/how-to-put-a-random-field-inside-a-div-with-a-script/21508/9 "2022-07-16T17:33:13Z")

</div>

The issue is the `const` keyword. Because the document persists between cards, using `const` outside of functions (outermost scope) causes a SyntaxError.

Use the keyword `var` instead or enclose the script in an IIFE, like:

```auto
(() => {
  const fields = document.querySelectorAll(".sentence");
  fields[3].hidden = false;
})();

```

---

<div class="post-metadata">

**Author:** ![ODeer](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/odeer/32/10217_2.png) [@ODeer](https://forums.ankiweb.net/u/ODeer)\
**Post date:** [July 16, 2022, 5:37pm UTC](https://forums.ankiweb.net/t/how-to-put-a-random-field-inside-a-div-with-a-script/21508/10 "2022-07-16T17:37:10Z")

</div>

Right into my “HTF does JS work” deck it goes.

---

<div class="post-metadata">

**Author:** ![bkztei](https://avatars.discourse-cdn.com/v4/letter/b/3be4f8/32.png) [@bkztei](https://forums.ankiweb.net/u/bkztei)\
**Post date:** [July 16, 2022, 10:08pm UTC](https://forums.ankiweb.net/t/how-to-put-a-random-field-inside-a-div-with-a-script/21508/11 "2022-07-16T22:08:57Z")

</div>

Thanks a lot!

---

<div class="post-metadata">

**Author:** ![PrinceVince](https://avatars.discourse-cdn.com/v4/letter/p/f9ae1b/32.png) [@PrinceVince](https://forums.ankiweb.net/u/PrinceVince)\
**Post date:** [July 27, 2022, 3:58am UTC](https://forums.ankiweb.net/t/how-to-put-a-random-field-inside-a-div-with-a-script/21508/12 "2022-07-27T03:58:42Z")

</div>

Just wondering if you got this to work and what it actually looks like on your flashcard. I think this is a great idea. You can have the flashcard display a random sentence every time you see it? That’s great.

---

<div class="post-metadata">

**Author:** ![bkztei](https://avatars.discourse-cdn.com/v4/letter/b/3be4f8/32.png) [@bkztei](https://forums.ankiweb.net/u/bkztei)\
**Post date:** [July 27, 2022, 4:27am UTC](https://forums.ankiweb.net/t/how-to-put-a-random-field-inside-a-div-with-a-script/21508/15 "2022-07-27T04:27:00Z")

</div>

Yes.  
Everything works great. The cards look like this:

[https://youtu.be/6LRGZHowZsI](https://youtu.be/6LRGZHowZsI)

---

<div class="post-metadata">

**Author:** ![PrinceVince](https://avatars.discourse-cdn.com/v4/letter/p/f9ae1b/32.png) [@PrinceVince](https://forums.ankiweb.net/u/PrinceVince)\
**Post date:** [July 27, 2022, 4:47am UTC](https://forums.ankiweb.net/t/how-to-put-a-random-field-inside-a-div-with-a-script/21508/16 "2022-07-27T04:47:10Z")

</div>

That’s awesome. Your cards look great! I have a system that’s a bit different but I like your ideas. I explain how my flashcards work on this page:

[https://ankimaster.com/the-ankimaster-system-how-to-study-your-cards/](https://ankimaster.com/the-ankimaster-system-how-to-study-your-cards/)

What I describe there I believe is the optimal way to study Anki flashcards for learning languages.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 1, 2023, 7:34am UTC](https://forums.ankiweb.net/t/how-to-put-a-random-field-inside-a-div-with-a-script/21508/17 "2023-05-01T07:34:42Z")

</div>