Javascript Foreach仅读取1行

当我试图让SpeechModule显示foreach循环时，Text-to-speech只读取第一部分，然后停止

function SpeechModule(var1)
{
   const TxtToSpeech = new SpeechSynthesisUtterance();
    let voices = speechSynthesis.getVoices();
    let search = document.getElementById("data").innerHTML;

    TxtToSpeech.text = search;
   
    TxtToSpeech.volume = 2;
    TxtToSpeech.rate = 0.5;
    TxtToSpeech.pitch = 2;
   
    TxtToSpeech.voice = voices[4];
   
    window.speechSynthesis.speak(TxtToSpeech);

}

根据您的代码，我相信div id（名为“text”）将出现不止一次

如果是这种情况，系统将无法区分您在TextToSpeech函数中引用的div（或者如果可以，它将只处理第一个div）

这是有道理的，但是，“text”函数是否有办法读取所有foreach循环？
    <?php foreach($JSON as $file): ?>
    
   <div id="data">
      
    <p> <?php echo $display->firstname; ?> </p>
    <p> <?php echo $display->lastname; ?> </p>    
</div>    
    
    <?php endforeach; ?>

<?php 

$index=1;

foreach($JSON as $file): ?>
    
<div id="text<?php echo $index; ?>">
      
    <h1> Title: <?php echo $display->title; ?> </h1>
    <h2> First Name: <?php echo $display->firstname; ?> </h2>    
</div>    
    
    <?php 
$index++;

endforeach; ?>



function TextToSpeech(var1)
{
   const speech = new SpeechSynthesisUtterance();
    let voices = speechSynthesis.getVoices();
    let convert = document.getElementById("text" + var1).innerHTML;

    speech.text = convert;
   
    speech.volume = 1;
    speech.rate = 1;
    speech.pitch = 1;
   
    speech.voice = voices[1];
   
    window.speechSynthesis.speak(speech);

}