Function not defined message error [SugarCube]

Authoring Twine
1

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 (w3schools.com)

How To Create a Tab Image Gallery (w3schools.com)

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

<<script>>
magnify("myimage", 3);
<</script>>

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.

2

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:

<<done>><<script>>
magnify("myimage", 3);
<</script>><</done>>

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
3

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">
</div>

<<done>><<script>>
magnify("myimage", 3);
<</script>><</done>>

But now I have the following error:

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

:pensive:

4

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
5

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.

Screen Shot 2021-04-12 at 12.47.02
Screen Shot 2021-04-12 at 12.47.02828×746 59.8 KB

Tried changing the magnifier strenght, no change.

<<done>><<script>>
magnify("avenirspec", 5);
<</script>><</done>>

I hope there is a solution.

6

Did you copy the included CSS into your Story Stylesheet?

7

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