JavaScript 代碼在 foreach 中不起作用

Question

我現在在 laravel 框架中工作（新手，剛剛開始），我有一個 foreach 語句，它將使用卡樣式引導程序顯示卡上的信息，我有一個腳本代碼，據說可以在每張卡上運行。 但是，該腳本僅適用於第一張卡，為什么會發生這種情況？

這是我的代碼

@foreach ($cutomers as $customer)
    <div class="column">
        <div class="card text-white bg-dark countdown">
           <h3 class="card-title" id="b">{{$customer->name</h3>
            <p class="card-text">{{$election->last_name}}</p>
            <p class="card-text">{{$election->age}}</p>
            <p id="demo"></p>
            <script>
               document.getElementById("demo").innerHTML = "test";
            </script>
       </div>
   </div>
@endforeach

該部分應該在 foreach 中運行每個循環

*對不起，我的英語不好

Answer 1

您正在多次使用 id demo 。 改用這個：

@foreach ($cutomers as $key => $customer)
        <div class="column">
            <div class="card text-white bg-dark countdown">
                <h3 class="card-title" id="b">{{$customer->name}}</h3>
                <p class="card-text">{{$election->last_name}}</p>
                <p class="card-text">{{$election->age}}</p>
                <p id="demo_{{ $key }}"></p>
                <script>
                    document.getElementById("demo_{{ $key }}").innerHTML = "test_{{ $key }}";
                </script>
            </div>
        </div>
        @endforeach

---

請記住刀片代碼在服務器上執行（僅在服務器上），javascript 代碼在瀏覽器上執行。

Answer 2

你必須像這樣使用

@foreach ($cutomers as $key => $customer)
    <div class="column">
        <div class="card text-white bg-dark countdown">
            <h3 class="card-title" id="b">{{$customer->name}}</h3>
            <p class="card-text">{{$election->last_name}}</p>
            <p class="card-text">{{$election->age}}</p>
            <p id="demo[{{$key}}]"></p>
            <script>
                document.getElementById("("demo["{{$key}}"]")).innerHTML = "your_value";
            </script>
        </div>
    </div>
@endforeach