Как передать переменную foreach из laravel blade в javascript?

Question

Ниже скрипт показывает, что при нажатии кнопки браузер произносит переменное слово. Однако я использую @foreach в laravel лезвии. Так что работает только первая кнопка. Но остальные кнопки, созданные с помощью foreach, не работают.

index.blade. php

@foreach($data as $val)
<h2><a class="word" href="/?keyword={{$val->word}}">{{$val->word}}</a></h2>      
<input id="text" type="hidden" value="{{$val->word}}">
<button id="speak-btn">play</button>
@endforeach

<script>
const text = document.querySelector('#text')
const speakBtn = document.querySelector('#speak-btn')
speakBtn.addEventListener('click', function() {
const uttr = new SpeechSynthesisUtterance(text.value)
speechSynthesis.speak(uttr)
})
</script>

Итак, как я могу заставить работать все кнопки? Я думаю, мне нужно использовать this в javascript. Однако я новичок в JS и не знаю, как правильно его использовать. Спасибо.

Answer 1

У вас не может быть одного и того же идентификатора для всех ваших кнопок, вы можете использовать один и тот же класс и запрос по классу или вызвать функцию и передать туда текст и воспроизвести это

@foreach($data as $val)
<h2><a class="word" href="/?keyword={{$val->word}}">{{$val->word}}</a></h2>      
<input id="text" type="hidden" value="{{$val->word}}">
<button class="speak-btn" onclick="play('{{$val->word}}')">play</button>
@endforeach

<script>
function play(text) {
  // Change these 2 lines if you need 
  const uttr = new SpeechSynthesisUtterance(text)
  speechSynthesis.speak(uttr)
}
</script>

Answer 2

Если вы создаете несколько кнопок, не все они должны иметь одинаковый идентификатор.

Вместо этого вы должны использовать классы.

@foreach($data as $val)
    <h2><a class="word" href="/?keyword={{$val->word}}">{{$val->word}}</a></h2>      
    <input class="text" type="hidden" value="{{$val->word}}">
    <button class="speak-btn">play</button>
@endforeach

И вы захотите запросить кнопки с селектором .speak-btn вместо них, затем l oop поверх них.

Метод, который я использую здесь, немного неуклюжий, но пытается следовать за вашими c logi, чтобы облегчить понимание .

<script>
    const speakBtns = document.querySelector('.speak-btn')

    speakBtns.forEach(function(speakBtn, index) {
        speakBtn.addEventListener('click', (function(index) {
            return function() {
                const text = document.querySelector('.text')[index]
                const uttr = new SpeechSynthesisUtterance(text.value)
                speechSynthesis.speak(uttr)
            }
        })(index))
    }

</script>