Jquery Val（）を呼び出した後、Append（）が機能しない

Question

私はHTML、JavaScript、およびJqueryを初めて使用しています。なぜ私はVal（ ""）を呼び出した後、Append（）がTextAreaにテキストを追加していないのか分かりません。検索を開始するたびにTextAreaのテキストをクリアしたいので、Val（ ""）を呼び出す必要がある理由です。だからUIで、私はゲームや会社の名前のテキストを入力し、入力フィールドに基づいてゲームを検索するためにボタンを押します。下のコードはsite.jsのコードです。ありがとう。

var arr = [ 
    { 
     Game:"Double Dragon", 
     Developer: "Technos Japan Corp", 
     Publisher: "Acclaim", 
     Platform: { 
      Console: "Nintendo" 
     } 
    },{ 
     Game:"Street Fighter 2000", 
     Developer: "Capcom", 
     Publisher: "Capcom", 
     Platform: { 
      Console: "Nintendo" 
     } 
    },{ 
     Game:"Super Mario Bros.", 
     Developer: "Nintendo", 
     Publisher: "Nintendo", 
     Platform: { 
      Console: "Nintendo" 
     } 
    },{ 
     Game:"Secret Mana", 
     Developer: "SquareSoft", 
     Publisher: "SquareSoft", 
     Platform: { 
      Console: "Super Nintendo" 
     } 
    },{ 
     Game:"Final Fight", 
     Developer: "Capcom", 
     Publisher: "Capcom", 
     Platform: { 
      Console: "Super Nintendo" 
     } 
    },{ 
     Game:"Super Contra", 
     Developer: "Konami", 
     Publisher: "Konami", 
     Platform: { 
      Console: "Nintendo" 
     } 
    },{ 
     Game:"Mega Man", 
     Developer: "Capcom", 
     Publisher: "Capcom", 
     Platform: { 
      Console: "Nintendo" 
     } 
    } 
]; 


function GameBtnEvent() 
{ 
    //$("#textAreaText").val('');//if I comment this out, Append() call will work, otherwise Append() does not append text to TextArea 
    DisplayResults(); 
} 

function DisplayResults() 
{ 
    var found = 0; 

    $.each(arr, function (index, value) { 
     var gameName = $("#searchTitle").val(); 
     var companyName = $("#selectionBlock").val(); 

     if(companyName.toLowerCase() == value.Publisher.toLowerCase()) 
     { 
      $('#textAreaText').append("Title: " + value.Game + "\n"); 
      $('#textAreaText').append("Company: " + value.Publisher + "\n"); 
      $('#textAreaText').append("Console: " + value.Platform.Console + "\n\n"); 
      found = 1; 
     } 
     else if(companyName.toLowerCase() == value.Publisher.toLowerCase() && 
       gameName.toLowerCase() == value.game.toLowerCase()) 
     { 
      $('#textAreaText').append("Title: " + value.Game + "\n"); 
      $('#textAreaText').append("Company: " + value.Publisher + "\n"); 
      $('#textAreaText').append("Console: " + value.Platform.Console + "\n\n"); 
      found = 1; 
     } 
    }); 

    if(found == 0) 
    { 
     $("#textAreaText").append("game not found"); 
    } 
} 

更新： それは、この動作はChromeのみに発生するようだが、Explorerは問題がありません。

Answer 1

#textAreaTextが<textarea>要素であると仮定すると、最初にappend()を使用しないでください。すべての場合にval()を使用してください。

また

function GameBtnEvent() { 
    $("#textAreaText").val(''); 
    DisplayResults(); 
} 

function DisplayResults() { 
    $.each(arr, function(index, value) { 
    if ($("#selectionBlock").val().toLowerCase() == value.Publisher.toLowerCase() || $("#searchTitle").val().toLowerCase() == value.game.toLowerCase()) { 
     $('#textAreaText').val(function(i, v) { 
      return `${v}Title: ${value.Game}\nCompany: ${value.Publisher}\nConsole: ${value.Platform.Console}\n\n`); 
     }); 
    } 
    }); 

    if (arr.length == 0) { 
    $("#textAreaText").val("game not found"); 
    } 
} 

私はロジックを作ったことに注意してください：あなたは、既存の値に追加する必要がある場合は、このように、新しい値を返すときに使用できる引数として現在の値を受け入れval()に機能を提供あなたの2つの条件がほぼ同じであるため、より簡潔に、ANDロジックをORステートメントにするだけで済みます。