Javascript 无法使用循环下的第二个注释框

我在每个产品的循环下都创建了Comment box。但是在我的第一个产品中，我在这里成功地发表了评论。但是在我的第二个产品中，当我单击“添加评论”时，我发现了一个意外的结果。在单击之后，此评论没有像我的第一个产品视频评论那样显示

这是我的密码：

<h4>Product Review</h4>
</br></br>





@foreach (var laptop in ViewBag.v)
{

    <div class="row">
        <video src="~/@laptop.Image1" alt="Card Image" class="card-img-top" controls height="400px" loop />
    </div>
    @:</br>
    @:<div class="border">
        <div id="display" class="ml-2"></div>
    @:</div>
    @:</br>
    @:<div class="comment">
        <textarea id="title" type="text " rows="2" cols="4" onkeyup="Allow()" placeholder="write a comment......" style="width:840px;height:50px;"></textarea>
        <input type="submit" value="Add Comment" class="btn btn-outline-dark" onclick="insert()" style="width:150px;height:50px;" />
        @:</form>
    @:</div>
    

    <div class="row float-right">
        <a asp-action="Details" asp-controller="ShopShow" asp-route-id="@laptop.Id" class="btn btn-primary pull-right btn-outline-light">Details</a>
    </div>
    @:</br></br></hr>
   


}

产品回顾



@foreach（ViewBag.v中的var笔记本电脑）
{
@:

@:
@:
@:

@:
@:
@:

在上面的输出中，我的第一个注释框工作，但第二个注释框不工作。解决方案是什么。
当您将输入元素放入循环中时，它们的ID重复，这是不正常的。Javascript无法区分这些元素之间的不同，通常会获取第一个元素并忽略所有其他元素

要解决此问题，您应该将ID更改为类似于
title_1
和
title_2
的内容，以便可以分别引用它们

for (index ..) {
    <input id="title_${index}"/>
    <input submit onclick="insert(index)"/>
}

function insert(index) {
    const element = find('title_' + index);
    ....
}

用于（索引..）{
}
函数插入（索引）{
常量元素=查找（'title_'+索引）；
....
}

或者您可以找到与提交按钮相关的元素。
根据您的代码，我发现您只需使用
document.getElementById（“title”）
获取title元素。因为您有多个名为title的输入元素。这意味着它将始终找到第一个title元素

这就是为什么textarea值总是添加到第一个值的原因

要解决此问题，可以向textarea id添加索引，如下所示：

i是ViewBag.v的索引

然后可以将索引i作为参数传递给insert javascript函数

此外，我发现您使用了title[]作为全局变量，这将使所有显示div使用相同的textarea值。为了解决此问题，我建议您删除title数组，直接添加textarea值并删除textarea

更多详细信息，请参考以下代码示例：

控制器：

    public IActionResult Privacy()
    {
        ViewBag.v  = new List<Laptop>() { new Laptop { Image1="path1", Id=1 }, new Laptop { Image1="path2" , Id=2} };
        return View();
      
    }

public IActionResult Privacy（）
{
ViewBag.v=new List（）{new Laptop{Image1=“path1”，Id=1}，new Laptop{Image1=“path2”，Id=2}；
返回视图（）；
}

视图：

产品回顾



@对于（int i=0；i
@:
@:
@:

@:
@:
@:
不确定到底是什么问题，但
var messageBox=document.getElementById（“显示”）；
将始终返回与该ID匹配的第一个元素。我猜这会导致一些不希望出现的行为，因为您的页面上可以有多个具有该ID的元素。请澄清您的代码。我不明白由于初学者的水平，我在哪里更改了。@Linkon dude，这是伪代码，您应该理解这个想法并实现我我不能靠你自己。
    public IActionResult Privacy()
    {
        ViewBag.v  = new List<Laptop>() { new Laptop { Image1="path1", Id=1 }, new Laptop { Image1="path2" , Id=2} };
        return View();
      
    }

<h4>Product Review</h4>
</br></br>
@for (int i = 0; i < ViewBag.v.Count; i++)
{

    <div class="row">
        <video src="~/@ViewBag.v[i].Image1" alt="Card Image" class="card-img-top" controls height="400px" loop />
    </div>
    @:</br>
    @:<div class="border">
        <div id="display_@i" class="ml-2"></div>
    @:</div>
    @:</br>
    @:<div class="comment">
        <textarea id="title_@i" type="text " rows="2" cols="4" onkeyup="Allow(@i)" placeholder="write a comment......" style="width:840px;height:50px;"></textarea>
        <input type="submit" value="Add Comment" class="btn btn-outline-dark" 
               onclick="insert(@i)" style="width:150px;height:50px;" />
        @:</form>
    @:</div>
    <div class="row float-right">
        <a asp-action="Details" asp-controller="ShopShow" asp-route-id="@ViewBag.v[i].Id" class="btn btn-primary pull-right btn-outline-light">Details</a>
    </div>
    @:</br></br></hr>
}

 function Allow() {
    if (!user.title.value.match(/[a-zA-Z]$/) && user.title.value != "") {
        user.title.value = "";
        alert("Please Enter only alphabets");
    }
    window.location.reload()
}
function insert(i) {
    var titleInput = document.getElementById("title_" + i);
    var messageBox = document.getElementById("display_" + i);

 
   messageBox.innerHTML +=  titleInput.value + "<br/>";


    titleInput.value = '';
}