ループの下で私の2番目のコメントボックスを動作させることができませんでした

Linkon

すべての製品でループの下にコメントボックスを作成しましたが、最初の製品ではここに正常にコメントしましたが、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番目のコメントボックスは機能していません。解決策は何ですか。

Brando Zhang

あなたのコードによると、あなた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]

編集
0

コメントを追加

0

関連記事

分類Dev

シンボルの生のティックデータのパンダで最初の行をスキップし、2番目の行をヘッダーとして使用しているときにcsvを読み取ることができません

分類Dev

条件付きフォーマットルールは、Googleスプレッドシートでは機能しません。3番目を追加すると2つの条件で動作しますが動作しません

分類Dev

ルート以外のコンテキストパスでkubernetesingress-nginxを介してWebSocketアプリを動作させることができません

分類Dev

私のDiscordボットが2番目のサーバーで動作していません

分類Dev

これらのコントロールキーをvimで動作させることができません

分類Dev

Ubuntu 13.10をインストールしたばかりで、Netflixデスクトップを動作させることができません

分類Dev

Ubuntu 13.10をインストールしたばかりで、Netflixデスクトップを動作させることができません

分類Dev

例外のため、静的メソッドでASP.NETCoreにデータをシードできません '2番目の操作が前のコンテキストより前にこのコンテキストで開始されました'

分類Dev

スクロールトップを正しく動作させることができません

分類Dev

Linux Mint 20、Nvidiaカード付きラップトップ:2台目のモニターを動作させることができません

分類Dev

自分のサイトで JQuery スクロール機能を動作させることができません

分類Dev

2枚目のネットワークカードをubuntuサーバーで動作させることができません

分類Dev

SwiftUIは提示された2番目のシートを却下することはできません

分類Dev

kafkaコンソールのプロデューサーまたはコンシューマーを動作させることができません

分類Dev

オプションのプロトコル要件、動作させることができません

分類Dev

生成されたトークンで2番目のサービスをヒットできません

分類Dev

Liefがインストールされません| 救済のための車輪を作ることができませんでした

分類Dev

フェニックスのEctoモデルでJSONBを動作させることができません

分類Dev

Ingress-Nginx-Controllerは、Google CloudPlatformにデプロイされた2番目のサービスを見つけることができませんでした

分類Dev

自作からインストールした後、ffmpegを動作させることができません

分類Dev

Angular8プロジェクトのVisualStudioCodeで起動してChromeデバッガーを動作させることができません

分類Dev

DBus の 2 番目のクラスのメソッドを呼び出すことができません

分類Dev

psycopg2を動作させることはできませんが、正しくインストールされています。マックOS

分類Dev

私のメールボックスが届きました。しかし、メールボックスの内容はテキストのみであるため、メールボックスでパッチを取得する方法がわかりません

分類Dev

複数のモニターをWindowsリモートデスクトップで動作させることができません

分類Dev

メールフォームで送信されたメッセージを強調することができません。誰でも私に手を差し伸べることができますか?これが私のコードです:

分類Dev

PHPmysqliステートメントから2番目の結果セットを読み取ることができません

分類Dev

レール上のRubyで作業しているときにgitでスタックし、コミットを元に戻した後でも作成されたテーブル(モデル)を元に戻すことができません

分類Dev

ブートストラップフレームワークから電子メールを送信するこれでの私のエラーは、「メールは正常に送信されましたが、メールを受信しませんでした」というメッセージが表示されることです。

Related 関連記事

  1. 1

    シンボルの生のティックデータのパンダで最初の行をスキップし、2番目の行をヘッダーとして使用しているときにcsvを読み取ることができません

  2. 2

    条件付きフォーマットルールは、Googleスプレッドシートでは機能しません。3番目を追加すると2つの条件で動作しますが動作しません

  3. 3

    ルート以外のコンテキストパスでkubernetesingress-nginxを介してWebSocketアプリを動作させることができません

  4. 4

    私のDiscordボットが2番目のサーバーで動作していません

  5. 5

    これらのコントロールキーをvimで動作させることができません

  6. 6

    Ubuntu 13.10をインストールしたばかりで、Netflixデスクトップを動作させることができません

  7. 7

    Ubuntu 13.10をインストールしたばかりで、Netflixデスクトップを動作させることができません

  8. 8

    例外のため、静的メソッドでASP.NETCoreにデータをシードできません '2番目の操作が前のコンテキストより前にこのコンテキストで開始されました'

  9. 9

    スクロールトップを正しく動作させることができません

  10. 10

    Linux Mint 20、Nvidiaカード付きラップトップ:2台目のモニターを動作させることができません

  11. 11

    自分のサイトで JQuery スクロール機能を動作させることができません

  12. 12

    2枚目のネットワークカードをubuntuサーバーで動作させることができません

  13. 13

    SwiftUIは提示された2番目のシートを却下することはできません

  14. 14

    kafkaコンソールのプロデューサーまたはコンシューマーを動作させることができません

  15. 15

    オプションのプロトコル要件、動作させることができません

  16. 16

    生成されたトークンで2番目のサービスをヒットできません

  17. 17

    Liefがインストールされません| 救済のための車輪を作ることができませんでした

  18. 18

    フェニックスのEctoモデルでJSONBを動作させることができません

  19. 19

    Ingress-Nginx-Controllerは、Google CloudPlatformにデプロイされた2番目のサービスを見つけることができませんでした

  20. 20

    自作からインストールした後、ffmpegを動作させることができません

  21. 21

    Angular8プロジェクトのVisualStudioCodeで起動してChromeデバッガーを動作させることができません

  22. 22

    DBus の 2 番目のクラスのメソッドを呼び出すことができません

  23. 23

    psycopg2を動作させることはできませんが、正しくインストールされています。マックOS

  24. 24

    私のメールボックスが届きました。しかし、メールボックスの内容はテキストのみであるため、メールボックスでパッチを取得する方法がわかりません

  25. 25

    複数のモニターをWindowsリモートデスクトップで動作させることができません

  26. 26

    メールフォームで送信されたメッセージを強調することができません。誰でも私に手を差し伸べることができますか?これが私のコードです:

  27. 27

    PHPmysqliステートメントから2番目の結果セットを読み取ることができません

  28. 28

    レール上のRubyで作業しているときにgitでスタックし、コミットを元に戻した後でも作成されたテーブル(モデル)を元に戻すことができません

  29. 29

    ブートストラップフレームワークから電子メールを送信するこれでの私のエラーは、「メールは正常に送信されましたが、メールを受信しませんでした」というメッセージが表示されることです。

ホットタグ

アーカイブ