Function not defined message error [SugarCube]

Please specify version and format if asking for help, or apply optional tags above:
Twine Version: version 2.3.13
Story Format: SugarCube 2.35.0

Hi, I am really new in Twine. My game consists in a very simple list of choices, which at the end shows several images. It worked in Harlowe just fine, but I wanted to make it more appealing and switched to SugarCube.

What I want to do with those images is explained in the following links:

How To Create an Image Magnifier Glass (

How To Create a Tab Image Gallery (

I just copy-paste all code as explained there, but when I test the passage, the following error message appears:

Error: <>: bad evaluation: magnify is not defined

magnify("myimage", 3);

I´ve been searching how to define the function (magnify for the first link) but unfortunately, with no luck.

I really hope there is no other post similar; if so, my apologies for asking again.

Best regards.

That’s a twofold issue: getting your function in-scope and waiting until your element is attached to the page. There are a few ways to resolve both parts.


For the former, the simplest is probably to just make the functions auto-globals. Assuming you pasted the JavaScript into your project’s Story JavaScript section, all you need to do is add something like the following after the function body:

window.function_name = function_name;

For example, for magnify():

window.magnify = magnify;


For the latter, after having completed the above, your <<script>> example should work with one small tweak:

magnify("myimage", 3);

For older versions of SugarCube that don’t have the <<done>> macro, since it’s somewhat recent, <<timed 0s>> may be used instead.

1 Like

First of all, many thanks for your advise.

Per your instructions, next is what I have:

function magnify(imgID, zoom) {
	var img, glass, w, h, bw;
	window.magnify = magnify;
	img = document.getElementById(imgID);

And the following in the passage:

<div class="img-magnifier-container">
  <img id="avenirspec" src="1200px-Avenir.png" width="300">

magnify("myimage", 3);

But now I have the following error:

A fatal error has occurred . Aborting.
Error <<script>>:bad evaluation: magnify is not defined.


Try putting your function into your JavaScript section like this:

window.magnify = function (imgID, zoom) {
	var img, glass, w, h, bw;
	img = document.getElementById(imgID);

That should do the trick. :slight_smile:

1 Like

Indeed did it, many thanks!

But… the magnify effect does not work. The glass appears (with the arrow cursor) and moves far from the image limits.

Tried changing the magnifier strenght, no change.

magnify("avenirspec", 5);

I hope there is a solution.

Did you copy the included CSS into your Story Stylesheet?

Yes, I did. Here it is:

* {box-sizing: border-box;}

.img-magnifier-container {
  position: relative;

.img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 100px;
  height: 100px;