色々とおかしいですね。
他の質問でも指摘していますが、
javasprict → javascript
大文字小文字くらいは仕方ないですが、
sprictなんて単語は存在しません。 - wiki:スクリプト
HTMLもおかしいです。
構文チェックにかけた結果こんな感じです。
htmlが正しくないと動作の保証はないと思って良いですし、思わぬバグを埋め込む可能性があります。
簡単なマークアップの例もあるので、そちらを参考にしながら組んでください。
プログラムは組んだとおりにしか動かないので、最初のスペルミスは命取りになりかねません。
できれば大文字小文字もきちんと区別して覚えましょう。タグにあるとおり「JavaScript」です。
大文字小文字を大別する言語はそれだけでエラーとなります。
本件と関係ないと思ったら実は大間違いです。
上記をきちんと把握していないと、下記も理解できませんし、身につきません。
「定義」は定数などで特別に宣言されていないと後勝ちです。
下記がミニマムコードの例
js
1var test = "1";
2var test = "3";
3
4console.log(test);
5//3
宣言の仕方によっては「重複定義」をエラーで教えてくれるものもあります。
js
1let test = "1";
2let test = "3";
3
4console.log(test);
5//SyntaxError: Identifier 'test' has already been declared
関数は重複定義のエラーを出してくれません。
※標準関数と同名の関数を作っても上書きしてしまうくらいです
ということで、対応方法としては主に2つ。
- 関数名を変える(他の回答の通り)
- 同じ関数を呼び出すが引数などで部分的に切り替える
見たところ、pitchの設定有無とtextの内容だけなので、2番目の方が望ましいですね。
1.の内容だとボタンが増えるたびにコードがどんどん長くなります。共通化できるところは共通化しましょう。
例えば下記(あくまでコードをすっきりさせてエラーがでないだけの未検証コード)
html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <title>test</title>
6</head>
7<body>
8<input type="button" value="サンタ" onClick="hoge('サンタ')">
9<input type="button" value="トナカイ" onClick="hoge('トナカイ',1000)">
10<script>
11function hoge(text,pitch){
12 var pitch = typeof pitch !== 'undefined' ? pitch : 1;
13 var ss = new SpeechSynthesisUtterance();
14 ss.text = text;
15 ss.lang = 'ja-JP';
16 ss.pitch = pitch;
17 speechSynthesis.speak(ss);
18}
19</script>
20</body>
21</html>