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"); 
    } 
} 

업데이트 : 그것은이 동작은 크롬에서 발생 보이지만 탐색기 아무 문제가 없습니다.

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()에 기능을 제공 귀하의 두 조건이 거의 동일하기 때문에 더 간결하게, 당신은 단지 OR 논리로 AND 논리를 만들 필요가 있습니다.