htmlの文書中のjavascriptの適用範囲を限定したい。

###javascriptの適用範囲について
javascriptでapiをもちいて、英単語をしゃべらせたい

###発生している問題
当方、このようなコードをwordpressのテキスト編集モードで入れたのですが、結果的には「sample word one」をクリックしても、「sample word two」と発音してしまいます。初心者なりに、これが起こる問題はたぶん[var]のjavascriptの変数定義の仕様だと思います。このように英単語を何百も言わせたいとき、varの変数が自動的にかわってくれない、（例えばC言語の場合は変数は上から読み込まれてだんだん更新されていきますよね。）javascriptの仕様は不都合だと思います。

例えば、javascriptの要素取得や変数の範囲を文章中で限定するような方法はありますでしょうか？（例えば要素取得でも文書の一番最初から読み込まれますので、textの要素を取得しようと思っても一番上のクラスやタグが取得されてしまいます。ex)document.querySelectorなど

<input style="display: none; "class="text" value="sample word one"/>
<a href="" onclick="speak(); return false;">sample word one</a>
<script>
function speak(){
   var speech = new SpeechSynthesisUtterance("sample word one");
 speech.voiceURI = 'Google US English';
    speech.lang = 'en-US';
    speechSynthesis.speak(speech);
}
</script>
<input style="display: none; "class="text" value="sample word two"/>
<a href="" onclick="speak(); return false;">sample word two</a>
<script>
function speak(){
   var speech = new SpeechSynthesisUtterance("sample word two");
 speech.voiceURI = 'Google US English';
    speech.lang = 'en-US';
    speechSynthesis.speak(speech);
}
</script>

###補足
とにかく、wordpressの固定ページにおいて、javascriptに「この部分を全文章とみなせばいいんだな」という風に指定させることができませんか……？（初心者なのであいまいな質問ですいません。）

行動規範の内容に同意します

回答1件

ベストアンサー

HTML
1<input style="display: none; "class="text" value="sample word one"/>
2<a href="" onclick="speak1(); return false;">sample word one</a>
3<script>
4function speak1(){
5   var speech = new SpeechSynthesisUtterance("sample word one");
6 speech.voiceURI = 'Google US English';
7    speech.lang = 'en-US';
8    speechSynthesis.speak(speech);
9}
10</script>
11<input style="display: none; "class="text" value="sample word two"/>
12<a href="" onclick="speak2(); return false;">sample word two</a>
13<script>
14function speak2(){
15   var speech = new SpeechSynthesisUtterance("sample word two");
16 speech.voiceURI = 'Google US English';
17    speech.lang = 'en-US';
18    speechSynthesis.speak(speech);
19}
20</script>