Read Javascript functions

beafus

Hello everybody!
I am using twine2 and harlowe.

I want to include this in my code:

<script>
 	if (annyang) {
	 console.log('Annyang is working');
  var r= document.getElementById('results')
  var color = function(color){r.style.backgroundColor=color}
  var commands = {
    'show me *color': color
  };

  annyang.addCommands(commands);
  annyang.start();
}else{
 console.log('Annyang not working');
}
</script>

And I have tried it in some ways but I dont know how to do it.
First of all I tried to create a function in my javascript story like this:

function miprueba() {
  	if (annyang) {
	 console.log('Annyang is working');
  var r= document.getElementById('results')
  var color = function(color){r.style.backgroundColor=color}
  var commands = {
    'show me *color': color
  };

  annyang.addCommands(commands);
  annyang.start();
}else{
 console.log('Anyyang not working');
}
}
miprueba();

But nothing happened so I just tried to call it using a button.

<input onclick="miprueba()" value="Button" type="button"></input>

But when pressed an error appears saying that " miprueba is not defined"


Then I just tried to include that script code in my passage within a <script></script> tag. But the same error appears.
How can I define and then use a javascript function in my passage??

Thank you!I appreciate your help!

greyelf

I want to include this in my code:

I believe your first problem is the result of Harlowe not supporting the <script> element.

First of all I tried to create a function in my javascript story like this:

Your second problem is a timing issue.
The function in the Story Javascript area is getting called before your 'results' element will exist, so the function will fail.

But nothing happened so I just tried to call it using a button.

Your third problem is one of scope, the function you defined in your Story Javascript area is not in-scope/available/visible to the passage so it can't be used within the button's onclick event.

You can fix your third issue by making your function global:

window.miprueba = function() {
	/* your code goes here....*/
};

note: you may want to check your javascript, it was using a undefined variable named 'annyang', missing some semi-colons, did not check if your 'r' variable actually contained an element before using it, etc....

beafus

Thank you Greyelf! that was really useful!
I have tried the third one like you told me and now the function is being called

window.miprueba = function() {
	/* your code goes here....*/
};

Also about the annyang I am using the annyang code reading a js file from the internet. This code is used to recognized voice. Here is a link that explains what anyang is used for:
https://talater.com/annyang/

When I call that function by pressing the button, the browser asks me permission to use the microphone so I guess some of the code is working. But when I speak nothing happens, and it should change the color of a <div> tag.

<div id="results"></div>

So that is why I use the r element in my code:

var r= document.getElementById('results');

I have also tried this code to see if it works as it is simpler but it also asks for microphone but when I speak nothing happens

window.sayhello = function() {
    if (annyang) {
        var commands = {
            'Hello': function() {
                alert('Hi! I can hear you.');
            }
        };
        annyang.addCommands(commands);
        annyang.start(); 
    }
};

The command is what the program expects to hear, so in this last case if it hears the word "hello", the alert will appear.While in the color example it changes the color of the div element.

So I dont know if that is because I am calling the function by pressing a button.
How can I call a function after the page loads in my passage code?
When I try to do that in my javascript code this error appears:

There is a problem with this story's script (#1):

annyang is not defined

But it does not appear when pressing the button.

Thank you for your help!

beafus

It's working! thank you anyway!