Unable to call a Javascript class from HTML

Question

Please have a look at the below code

TTSScript.js

   function TTS()
{
    var msg = new SpeechSynthesisUtterance("yohan");
    var voices = window.speechSynthesis.getVoices();

    this.speakText = function()
        {
             window.speechSynthesis.speak(msg);
        }
    }

index.html

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script src="/scripts/TTSScript.js"></script>
        <script>
           function speak()
           {
               var msg = new SpeechSynthesisUtterance('Hello World');
               window.speechSynthesis.speak(msg);
           }

           function speak2()
           {
               var TTS = new TTS();
               TTS.speakText();
           }


        </script>
    </head>
    <body>
        <div><button onclick="speak2()">Click me</button></div>
    </body>
</html>

Unfortunatly when I click on the button in the html page, what I get is an error. It is below.

Uncaught TypeError: undefined is not a function (13:42:13:817 | error, javascript)
    at speak2 (public_html/index.html:23:26)
    at onclick (public_html/index.html:31:126)

I am not much familiar with JavaScript, can you please let me know why I am getting this error and how to fix it?

Is that the only error? is SpeechSynthesisUtterance defined in your browser? — Tim Seguine
– Tim Seguine, Commented Jan 20, 2015 at 8:22
a js fiddle would be welcome, in other case it's a "why isn't this code working?" question — micnic
– micnic, Commented Jan 20, 2015 at 8:25
@TimSeguine: as you can see, I can call speak() function with no issues, Yes, the SpeechSynthesisUtterance is defined. — PeakGen
– PeakGen, Commented Jan 20, 2015 at 8:27
@JustCause Actually I can't see that. You didn't say it until now, and you aren't calling it anywhere in your example. — Tim Seguine
– Tim Seguine, Commented Jan 20, 2015 at 8:28

Gil · Accepted Answer · 2015-01-20 08:57:51Z

2

After declaring a function, its name becomes a (locally) preserved word. It means that creating a variable with the same name might cause some problems.

I took your code and changed

var TTS = new TTS();
TTS.speakText();

Into

var tts = new TTS();
tts.speakText();

And the error disappeared.

answered Jan 20, 2015 at 8:57

Gil

1,8441 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gil Over a year ago

Not working and having errors are two different things. Does this solve the error message? If it does you can now debug the function and find out what's stopping it from working.

Peachyz · Accepted Answer · 2015-01-20 09:06:37Z

1

I solved your problem.. :

don't use all capital names as variables

var tts = new TTS(); tts.speakText();
correct speak call is in the fiddle

http://jsfiddle.net/bpprwfxa/4/

var msg = new SpeechSynthesisUtterance('Yohan');
window.speechSynthesis.speak(msg);

edited Jan 20, 2015 at 9:06

answered Jan 20, 2015 at 9:01

Peachyz

1448 bronze badges

1 Comment

PeakGen Over a year ago

Not working in machine, working in fiddle. As I have mentioned, I the TTS function is belong to a different script, not an internal JS.

Collectives™ on Stack Overflow

Unable to call a Javascript class from HTML

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related