Functions do not work when added to other functions

@zamberJun 19.2021

I am finding in JS that components that work OK then don’t when combined with other components do not anymore. The functions fruitPick() and timeRandom() work when on their own, but when inserted into the rest of this code it no longer has a delay.

fruitPick() selects a random fruit, that works. But the rand in timeRandom() does not. What is supposed to happen is at intervals of between 0 to 5 seconds a fruit is selected. Instead it picks just one fruit, then stops.

“` <html> <body bgcolor=cyan>

<img src =”animated_rest.gif” id=”animated_rest” width=”310″ height=”392″ style=”position: absolute; top:92px; left:375px; visibility:hidden”/> <img src =”animated.gif” id=”animated” width=”310″ height=”392″ style=”position: absolute; top:92px; left:375px; visibility:hidden”/> <img src =”animated_reverse.gif” id=”animated” width=”310″ height=”392″ style=”position: absolute; top:92px; left:375px; visibility:hidden”/>

<input type=”button” onclick=”not_animated()” value=”Not Animated”> <input type=”button” onclick=”animated()” value=”Animated”>

<script type=”text/javascript”>

var input;

function fruitPick() { input = [‘apple’, ‘orange’, ‘grape’, ‘peach jelly sandwich’][Math.floor(Math.random() * 4)]; inputLen = input.length; }

function timeRandom() { var min = 0; var max = 5; var rand = Math.floor(Math.random() * (max – min + 1) + min); //Generate Random number between 0 – 5

setTimeout(timeRandom, rand * 1000); fruitPick(); }

function not_animated() { document.getElementById(‘animated_rest’).style.visibility=’visible’; document.getElementById(‘animated’).style.visibility=’hidden’; }

function animated() {

timeRandom() //Call to random array string pick

if (randomImage= 2) { document.getElementById(‘animated’).style.visibility=’visible’; } else { document.getElementById(‘animated_reverse’).style.visibility=’visible’; }

speechCall();

var timeCount;

switch (true) { case (inputLen < 6): timeCount=350; break; case (inputLen < 12): timeCount=600; break; case (inputLen <25): timeCount=1200; break; case (inputLen <40): timeCount=1800; break; case (inputLen < 50): timeCount=2400; break; }

setTimeout(“talkStop()”, timeCount); }

function talkStop() { document.getElementById(‘animated_rest’).style.visibility=’visible’; document.getElementById(‘animated’).style.visibility=’hidden’; }

function speechCall() { let msg = (input); let speech = new SpeechSynthesisUtterance(); speech.lang = “en-US”; // Text Language speech.text = msg; // The text you want to convert to speech speech.volume = 1; // Volume speech.rate = 1; // Speed speech.pitch = 1; // Pitch window.speechSynthesis.speak(speech); }

</script> </body> </html> “`

to post a comment

JavaScript

15 Comments(s) _↴

@zamberauthorJun 19.2021 — #<html>

<body bgcolor=cyan>

<img src ="animated_rest.gif" id="animated_rest" width="310" height="392" style="position: absolute; top:92px; left:375px; visibility:hidden"/>
  <img src ="animated.gif" id="animated" width="310" height="392" style="position: absolute; top:92px; left:375px; visibility:hidden"/>
  <img src ="animated_reverse.gif" id="animated" width="310" height="392" style="position: absolute; top:92px; left:375px; visibility:hidden"/>
 
  <input type="button" onclick="not_animated()" value="Not Animated">
  <input type="button" onclick="animated()" value="Animated">
 
 
  <script type="text/javascript">

//var input = ("Good");

//var input = timeRandom();

//var inputLen = input.length;

var input;

function fruitPick() {

input = ['apple', 'orange', 'grape', 'peach jelly sandwich'][Math.floor(Math.random() * 4)];

inputLen = input.length;

}

function timeRandom() {

var min = 0;

var max = 5;

var rand = Math.floor(Math.random() * (max - min + 1) + min); //Generate Random number between 0 - 5

setTimeout(timeRandom, rand * 1000);

fruitPick();

}

 function not_animated() {
   document.getElementById('animated_rest').style.visibility='visible';
   document.getElementById('animated').style.visibility='hidden';
   }
 
 
   function animated() {
 
  timeRandom()   //Call to random array string pick

if (randomImage= 2) {

document.getElementById('animated').style.visibility='visible';

} else {

document.getElementById('animated_reverse').style.visibility='visible';

}

speechCall();

var timeCount;

switch (true) {

case (inputLen < 6):

timeCount=350;

break;

case (inputLen < 12):

timeCount=600;

break;

case (inputLen <25):

timeCount=1200;

break;

case (inputLen <40):

timeCount=1800;

break;

case (inputLen < 50):

timeCount=2400;

break;

}

setTimeout("talkStop()", timeCount);

}

function talkStop() {

document.getElementById('animated_rest').style.visibility='visible';

document.getElementById('animated').style.visibility='hidden';

}

function speechCall() {

let msg = (input);

let speech = new SpeechSynthesisUtterance();

speech.lang = "en-US"; // Text Language

speech.text = msg; // The text you want to convert to speech

speech.volume = 1; // Volume

speech.rate = 1; // Speed

speech.pitch = 1; // Pitch

window.speechSynthesis.speak(speech);

}

</script>

</body>

</html>

@zamberauthorJun 19.2021 — #> <html>

<body bgcolor=cyan>

<img src ="animated_rest.gif" id="animated_rest" width="310" height="392" style="position: absolute; top:92px; left:375px; visibility:hidden"/>
  <img src ="animated.gif" id="animated" width="310" height="392" style="position: absolute; top:92px; left:375px; visibility:hidden"/>
  <img src ="animated_reverse.gif" id="animated" width="310" height="392" style="position: absolute; top:92px; left:375px; visibility:hidden"/>
 
  <input type="button" onclick="not_animated()" value="Not Animated">
  <input type="button" onclick="animated()" value="Animated">
 
 
  <script type="text/javascript">

var input;

function fruitPick() {

input = ['apple', 'orange', 'grape', 'peach jelly sandwich'][Math.floor(Math.random() * 4)];

inputLen = input.length;

}

function timeRandom() {

var min = 0;

var max = 5;

var rand = Math.floor(Math.random() * (max - min + 1) + min); //Generate Random number between 0 - 5

setTimeout(timeRandom, rand * 1000);

fruitPick();

}

 function not_animated() {
   document.getElementById('animated_rest').style.visibility='visible';
   document.getElementById('animated').style.visibility='hidden';
   }
 
 
   function animated() {
 
  timeRandom()   //Call to random array string pick

@zamberauthorJun 19.2021 — #

@zamberauthorJun 19.2021 — #In the original post, the code displayed crazy for some reason, so below I put the two blocks of code in question.

1. timeRandom() function is called

2. timeRandom() calls fruitPick()

3. setTimeout(timeRandom, rand * 1000) and rand are ignored.

timeRandom();

function fruitPick() {

input = ['apple', 'orange', 'grape', 'peach jelly sandwich'][Math.floor(Math.random() * 4)];

inputLen = input.length;

}

function timeRandom() {

var min = 0;

var max = 5;

var rand = Math.floor(Math.random() * (max - min + 1) + min); //Generate Random number between 0 - 5

setTimeout(timeRandom, rand * 1000);

fruitPick();

}

@SempervivumJun 19.2021 — #@zamber#1633127
>In the original post, the code displayed crazy for some reason

The reason is that single backticks (probably created by the button `</></C>) won't work reliably when posting code. You better use code tags: <C>your code here` or triple backticks.

I edited your posting accordingly.

@zamberauthorJun 19.2021 — #@Sempervivum#1633129

Thanks for fixing the code display, but why does the code in timeRandom() not work when mixed with other seemingly non-related functions, please? When I have just timeRandom() and fruitPick() all lines work within timeRandom().

This line no longer does not works:

var rand = Math.floor(Math.random() * (max - min + 1) + min); //Generate Random number between 0 - 5

But this the timeRandom() still does implement the fruitPick(): line of code. The functions work perfectly when alone, like below.

[CODE]
 <script>
 
 var fruit;
 timeRandom();
 
 function fruitPick() {
 fruit = ['apple', 'orange', 'grape', 'peach'][Math.floor(Math.random() * 4)];
 document.write("Fruit: " + fruit + "<BR>");
 }
 

 function timeRandom() {
 var min = 0;
 var max = 5;
 var rand = Math.floor(Math.random() * (max - min + 1) + min);   //Generate Random number between 0 - 5
 document.write('Wait for ' + rand + ' seconds ' );
 fruitPick();
 setTimeout(timeRandom, rand * 1000);
 }
 </script>
 [/CODE]

@daveyerwinJun 19.2021 — #@zamber#1633149

Well no need to time the end of speech

try this ...

``<i>
 </i>&lt;script&gt;
 var speech = new SpeechSynthesisUtterance();
 speech.lang = "en-US";
 speech.volume = 1;
 speech.rate = 1
 speech.pitch =  1;
 speech.onend=function(){alert('ended')};
 
 
 function speechCall(msg) { 
 speech.text = msg; 
 window.speechSynthesis.speak(speech);
 }
 speechCall("hi")
 &lt;/script&gt;<i>
 </i>`</CODE>
 Here is my solution ...
 
 <CODE>`<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;Say Stuff&lt;/title
 &lt;/head&gt;
 &lt;body&gt;
 &lt;button id=startIt&gt;Start&lt;/button&gt;
 &lt;button id=stopIt&gt;Stop&lt;/button&gt;
 &lt;div id=dsply&gt;&lt;/div&gt;
 &lt;script&gt;
 dsply.textContent="sedated";
 var speech = new SpeechSynthesisUtterance();
 speech.lang = "en-US";
 speech.volume = 1;
 speech.rate = 1
 speech.pitch =  1;
 var sTo = null;
 var stopped = true;
 speech.onend=function(){ 
 sTo = setTimeout(speechCall,Math.floor(Math.random() * 6) * 1000);
 if(stopped)clearTimeout(sTo);
 };
 
 function fruitPick() {
 return ['apple', 'orange', 'grape', 'peach jelly sandwich'][Math.floor(Math.random() * 4)];
 }
 
 function speechCall() { 
 speech.text = fruitPick(); 
 window.speechSynthesis.speak(speech);
 
 }
 startIt.onclick = function(){this.disabled=true;dsply.textContent="activated";speechCall();stopped=false;}
 stopIt.onclick = function(){clearTimeout(sTo);startIt.disabled=false;dsply.textContent="sedated";stopped=true;}
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;<i>
 </i>``

@zamberauthorJun 19.2021 — #Thanks for the great solution to the sound, but what about the timeout of the talking animation, please? The **return ['apple', 'orange',...** does not provide a string variable for a input.length;. Below is the way I used the variable to timeout the stings by length, but it is clunky.

Is there a way to get a variable or a more refined way than the code I have below to stop the talking animation, please?

<i>
 </i>function fruitPick() {
 input = ['apple', 'orange', 'grape', 'peach jelly sandwich'][Math.floor(Math.random() * 4)];
 inputLen = input.length;
 }

<i>
 </i>var timeCount;
 
 switch (true) {
 case (inputLen &lt; 6):
 timeCount=350;
 break;
 case (inputLen &lt; 12):
 timeCount=600;
 break;
 case (inputLen &lt;25):
 timeCount=1200;
 break;
 case (inputLen &lt;40):
 timeCount=1800;
 break;
 case (inputLen &lt; 50):
 timeCount=2400;
 break;
 }
 
 setTimeout("talkStop()", timeCount);
 }
 
 function talkStop() { 
 document.getElementById('animated_rest').style.visibility='visible';
 document.getElementById('animated').style.visibility='hidden';
 }

@zamberauthorJun 19.2021 — #@DaveyErwin#1633150

Thanks for the great solution to the sound, but what about the timeout of the talking animation, please? The **return ['apple', 'orange',...** does not provide a string variable for a input.length;. Below is the way I used the variable to timeout the stings by length, but it is clunky.

Is there a way to get a variable or a more refined way than the code I have below to stop the talking animation, please?

<i>
 </i>function fruitPick() {
 input = ['apple', 'orange', 'grape', 'peach jelly sandwich'][Math.floor(Math.random() * 4)];
 inputLen = input.length;
 }

<i>
 </i>var timeCount;
 
 switch (true) {
 case (inputLen &lt; 6):
 timeCount=350;
 break;
 case (inputLen &lt; 12):
 timeCount=600;
 break;
 case (inputLen &lt;25):
 timeCount=1200;
 break;
 case (inputLen &lt;40):
 timeCount=1800;
 break;
 case (inputLen &lt; 50):
 timeCount=2400;
 break;
 }
 
 setTimeout("talkStop()", timeCount);
 }
 
 function talkStop() { 
 document.getElementById('animated_rest').style.visibility='visible';
 document.getElementById('animated').style.visibility='hidden';
 }

@daveyerwinJun 20.2021 — #@zamber#1633154 said ...

but what about the timeout of the talking animation

- - - - - - - - - -

Well no need for a "setTimeout" to run animation

try this ...

``<i>
 </i>&lt;script&gt;
 var speech = new SpeechSynthesisUtterance();
 speech.lang = "en-US";
 speech.volume = 1;
 speech.rate = 1
 speech.pitch =  1;
 speech.onend=function(){alert('!! speech has ended !!')};
 
 
 function speechCall(msg) { 
 speech.text = msg; 
 window.speechSynthesis.speak(speech);
 }
 speechCall("hi")
 &lt;/script&gt;<i>
 
 </i>`</CODE>
 run that code and observe that the alert fires when speech ends
 
 Now ...
 
 <CODE>`<i>
 </i>dsply.textContent="sedated";
 var speech = new SpeechSynthesisUtterance();
 speech.lang = "en-US";
 speech.volume = 1;
 speech.rate = 1
 speech.pitch =  1;
 var sTo = null;
 var stopped = true;
 ///////this function runs when speech ends////
 //// so stop your animation in this function///
 speech.onend=function(){ 
 ///put your code to stop animation HERE///
 sTo = setTimeout(speechCall,Math.floor(Math.random() * 6) * 1000);
 if(stopped)clearTimeout(sTo);
 };
 ///// this function starts the speech so//
 //// put your code to start animation here///
 function speechCall() { 
 speech.text = fruitPick(); 
 window.speechSynthesis.speak(speech);
 /// put your code to start animation HERE///
 }<i>
 
 </i>`</CODE>
 This code is hosted at <URL url="https://daveyerwin.com/">https://daveyerwin.com/</URL>
 <CODE>`<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;Say Stuff&lt;/title
 &lt;/head&gt;
 &lt;body&gt;
 &lt;button id=startIt&gt;Start&lt;/button&gt;
 &lt;button id=stopIt&gt;Stop&lt;/button&gt;
 &lt;div id=dsply&gt;&lt;/div&gt;
 &lt;img id=talky src='https://daveyerwin.com/th.jpg'&gt;
 &lt;script&gt;
 dsply.textContent="sedated";
 var speech = new SpeechSynthesisUtterance();
 speech.lang = "en-US";
 speech.volume = 1;
 speech.rate = 1
 speech.pitch =  1;
 var sTo = null;
 var stopped = true;
 speech.onend=function(){
 dsply.textContent = "I am silent";
 talky.src='https://daveyerwin.com/th.jpg'
 sTo = setTimeout(speechCall,Math.floor(Math.random() * 6) * 1000);
 if(stopped)clearTimeout(sTo);
 };
 
 function fruitPick() {
 return ['apple', 'orange', 'grape', 'peach jelly sandwich'][Math.floor(Math.random() * 4)];
 }
 
 function speechCall() { 
 speech.text = fruitPick(); 
 window.speechSynthesis.speak(speech);
 dsply.textContent = "!!! I AM TALKING NOW  !!!";
 talky.src='https://daveyerwin.com/th.gif'
 }
 startIt.onclick = function(){this.disabled=true;speechCall();stopped=false;}
 stopIt.onclick = function(){clearTimeout(sTo);startIt.disabled=false;stopped=true;}
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;<i>
 </i>``

@zamberauthorJun 20.2021 — #@DaveyErwin#1633156

Thank you, the animation starts and ends. However, the animation is a talking animated gif whose mouth needs to move only during the TTS audio. The solution I used below uses a string variable that uses **input.length** to get the length of the string. APPLE=5. The longer the string (character count) the longer the moving mouth animation is visible. After the timeout a non-mouth moving gif becomes visible.

Is there a more refined way to hide the animated gif as soon as the TTS audio stops?

Is there a way to get a string variable if I use the **return**, so I can use input.length, please?

**_return_ ['apple', 'orange', 'grape', 'peach jelly sandwich'][Math.floor(Math.random() * 4)]**

[CODE]
 var timeCount;
 
 switch (true) {
 case (inputLen < 6):     // Longer the string, the longer the animation
 timeCount=350;
 break;
 case (inputLen < 12):
 timeCount=600;
 break;
 case (inputLen <25):
 timeCount=1200;
 break;
 case (inputLen <40):
 timeCount=1800;
 break;
 }
 
 setTimeout("talkStop()", timeCount);
 }
 
 function talkStop() { 
 document.getElementById('animated_rest').style.visibility='visible';
 document.getElementById('animated').style.visibility='hidden';
 } 
 [/CODE]

@daveyerwinJun 20.2021 — #this code is hosted at https://daveyerwin.com/talky/

``<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;Say Stuff&lt;/title
 &lt;/head&gt;
 &lt;body&gt;
 &lt;button id=startIt&gt;Start&lt;/button&gt;
 &lt;button id=stopIt&gt;Stop&lt;/button&gt;
 &lt;div id=dsply&gt;&lt;/div&gt;
 &lt;img id=talky src='https://daveyerwin.com/th.jpg' height=300px width=300px&gt;
 &lt;script&gt;
 "use strict";
 dsply.textContent="sedated";
 var speech = new SpeechSynthesisUtterance();
 speech.lang = "en-US";
 speech.volume = 1;
 speech.pitch =  1;
 speech.rate = 1 
 var sTo = null;
 var stopped = true;
 var sTo2;
 var currentWord;
 
 speech.onboundary = function(event) {
 talky.src='https://daveyerwin.com/th.gif';
 clearTimeout(sTo2);
 let length = currentWord.length * 70;
 setTimeout(function(){talky.src='https://daveyerwin.com/th.jpg'},length)
 }
 speech.onend=function(event){
 dsply.textContent = "I am silent"; 
 sTo = setTimeout(speechCall,Math.floor(Math.random() * 6) * 1000);
 if(stopped)clearTimeout(sTo);
 };
 
 function fruitPick() {
 return ['apple', 'orange', 'grape', 'peach jelly sandwich'][Math.floor(Math.random() * 4)];
 }
 
 function speechCall() { 
 currentWord = speech.text = fruitPick(); 
 
 window.speechSynthesis.speak(speech);
 dsply.textContent = "!!! I AM TALKING NOW  !!!";
 
 }
 startIt.onclick = function(){this.disabled=true;speechCall();stopped=false;}
 stopIt.onclick = function(){clearTimeout(sTo);startIt.disabled=false;stopped=true;}
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;<i>
 </i>``

@zamberauthorJun 21.2021 — #@DaveyErwin#1633177

It works great, thanks!

But I am doing this to learn and I do not understand what some lines of code are doing. I put the questions in the comments below. If you can answer my questions about it, I would appreciate it because I would like to learn, please.

[CODE]
 var speech = new SpeechSynthesisUtterance();  // Is this a built in method?
 speech.lang = "en-US";
 speech.volume = 1;
 speech.pitch =  1;
 speech.rate = 1 

 var sTo = null;
 var stopped = true;
 var sTo2;    // What is sTo2 variable exactly?
 var currentWord;
 
 speech.onboundary = function(event) {    //What calls this function?
 talky.src='https://daveyerwin.com/th.gif';  // What is talky, exactly? 
 clearTimeout(sTo2);
 let length = currentWord.length * 70;  // Why is 70 used?
 setTimeout(function(){talky.src='https://daveyerwin.com/th.jpg'},length)
 }
 speech.onend=function(event){      //What calls this function?
 dsply.textContent = "I am silent"; 
 sTo = setTimeout(speechCall,Math.floor(Math.random() * 6) * 1000);  //What is going on here?
 if(stopped)clearTimeout(sTo);   // Why no brackets around the IF statement?
 
 };   // Why bracket then a semi-colon?
 
 function fruitPick() {
 return ['apple', 'orange', 'grape', 'peach jelly sandwich'][Math.floor(Math.random() * 4)];
 }        // Why is using RETURN better than using a variable?
 
 function speechCall() { 
 currentWord = speech.text = fruitPick();  // Why the double assignment? 
 // Is speech.text a built in method?
 window.speechSynthesis.speak(speech);
 [/CODE]

@daveyerwinJun 21.2021 — #var speech = new SpeechSynthesisUtterance(); // Is this a built in method?

The SpeechSynthesisUtterance interface of the Web Speech API represents a speech request.

It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)

https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance

speech.onboundary = function(event) { //What calls this function?

The onboundary property of the SpeechSynthesisUtterance interface represents

an event handler that will run when the spoken utterance reaches a word or

sentence boundary (when the boundary event fires.)

https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance

in the code we are working with it fires when audio of a word begins

unfortunately there is no event that fires when the audio actually

stops so we are forced to use the setTimeout to stop the animatiion

in the code we are working with onend fires after a pause, that is why

the animation was running a little too long

var sTo2; // What is sTo2 variable exactly?

Well , here you have found an error in my code , Sorry , I will fix this

and repost the code

sTo = setTimeout(speechCall,Math.floor(Math.random() * 6) * 1000); //What is going on here?

the time out will execute the function speechCall after a random time interval

that is less than 6 seconds

if(stopped)clearTimeout(sTo); // Why no brackets around the IF statement?

this is a style choice, some people insist on brackets for ease of reading code

brackets ARE Nesessary only when more than one statement is to be executed

}; // Why bracket then a semi-colon?

you are right the semi-colon is not really necessary but

it doesn't hurt and some coders prefer this style choice

// Why is using RETURN better than using a variable?

In production quality code EVERY Function should return something and you

Should Never create global Var s unnecessarily, thank you for pointing out

my poor coding this will benefit future readers

currentWord=speech.text = fruitPick(); // Why the double assignment?

Again it's just poor coding , I use currentWord to find the char count

I could have used speech.text instead

currentWord and speech.text are assigned the same value

// Is speech.text a built in method?

The text PROPERTY of the SpeechSynthesisUtterance interface gets and sets the text that will be synthesised when the utterance is spoken.

https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/text

speech = new SpeechSynthesisUtterance();

so speech is an instance of SpeechSynthesisUtterance interface

properties hold values and/or are assigned values

methods execute code

GOOD LUCK with your learning experience

@ballzopJul 01.2021 — #i want to know Is there a more refined way to hide the animated gif as soon as the TTS audio stops? [.](https://tomzpot.com/) [.](https://mdro.fun/mobdro/)

Also in #JavaScript _↴

need help with help boxes As anyone seen this in Javascript none

Success!

Help @zamber spread the word by sharing this article on Twitter...

Tweet This

Functions do not work when added to other functions

15 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Functions do not work when added to other functions

15 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #JavaScript _↴