すべての製品でループの下にコメントボックスを作成しましたが、最初の製品ではここに正常にコメントしましたが、2番目の製品では、[コメントを追加]をクリックすると、予期しない結果が見つかりました。クリックした後、このコメントは私の最初の製品のvedioコメントのように表示されません。
これが私のコードです:
<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>
}
site.js
var titles = [];
var titleInput = document.getElementById("title");
var messageBox = document.getElementById("display");
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() {
titles.push(titleInput.value);
clearAndShow();
}
function clearAndShow() {
titleInput.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += " " + titles.join("<br/> ") + "<br/>";
}
出力:
上記の出力では、最初のコメントボックスは機能していますが、2番目のコメントボックスは機能していません。解決策は何ですか。
あなたのコードによると、あなたdocument.getElementById("title")
はタイトル要素を取得するために使用していることがわかりました。titleという名前の複数の入力要素があるため。つまり、常に最初のタイトル要素が検索されます。
これが、textarea値が常に最初の値に追加される理由です。
この問題を解決するには、次のようにtextareaidにインデックスを追加します。
iはViewBag.vのインデックスです。
次に、インデックスiをパラメーターとして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();
}
見る:
<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>
}
js:
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 = '';
}
結果:
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加