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

您demo多次使用该 id。使用这个代替：@foreach ($cutomers as $key => $customer)&nbsp; &nbsp; &nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="card text-white bg-dark countdown">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="card-title" id="b">{{$customer->name}}</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="card-text">{{$election->last_name}}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="card-text">{{$election->age}}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p id="demo_{{ $key }}"></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("demo_{{ $key }}").innerHTML = "test_{{ $key }}";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; @endforeach请记住，blade 代码是在服务器上执行的（仅在服务器上），而 javascript 代码是在浏览器上执行的。

Answer 2

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