자바 스크립트에서 HTML 폼의 값에 액세스하기

Question

자바 스크립트가 처음인데이 코드가 왜 그렇게 생각하지 않는지 알아 내는데 어려움이 있습니다.

여기 내 자바 스크립트 코드입니다. 내가하려는 것은 (지금은)이 텍스트 상자와 드롭 다운에서 값을 가져 와서 연결합니다.

<script> 
function AdvancedSearch() { 
var color = document.getElementByID("AdvSearchColor").value; 
var ply = document.getElementByID("AdvSearchPly").value; 
var cat = document.getElementByID("AdvSearchCategory").value; 
var size = document.getElementByID("AdvSearchSize").value; 
var description = document.getElementByID("AdvSearchDescription").value; 
var fullsearch = ply + color + cat + description + size; 
} 
</script>  

<form id="advsearach" onsubmit="AdvancedSearch()"> 
Product Color: <input type="text" name="productcolor" id="AdvSearchProductColor"><br> 
Product Ply Rating: <input type="text" name="productply" id="AdvSearchPlyRating"><br> 
Product Category: <input type="text" name="productcategory" id="AdvSearchProductCategory"><br> 
Product Size: <input type="text" name="productsize" id="AdvSearchProductSize"><br> 
Product Description: <input type="text" name="productdescription" id="AdvSearchProductDescription"><br> 
<input type="button" onclick="javascript:AdvancedSearch()" value="Search!"> 
</form> 

그래서 나는이 문제를 디버깅하고 작동하도록하는 데 어려움을 겪고 있습니다. 그것에 이미 몇 시간을 보냈다. 이것을 보면서 시간을내어 주신 분께 감사드립니다. 그것은 아마도 장기간에 걸쳐 많은 시간을 절약 할 것이며, 그것은 매우 훌륭한 일입니다.

Answer 1

document.getElementByID 대신 document.getElementById을 사용해야합니다. 오타가 "Id" != "ID"입니다. 그리고 양식의 ID가 좋은

<form id="advsearach"> 
    Product Color: <input type="text" name="productcolor" id="AdvSearchColor"><br> 
    Product Ply Rating: <input type="text" name="productply" id="AdvSearchPly"><br> 
    Product Category: <input type="text" name="productcategory" id="AdvSearchCategory"><br> 
    Product Size: <input type="text" name="productsize" id="AdvSearchSize"><br> 
    Product Description: <input type="text" name="productdescription" id="AdvSearchDescription"><br> 
    <input type="button" onclick="javascript:AdvancedSearch()" value="Search!"> 
</form> 

<script> 
function AdvancedSearch() { 
    var color = document.getElementById("AdvSearchColor").value, 
     ply = document.getElementById("AdvSearchPly").value, 
     cat = document.getElementById("AdvSearchCategory").value, 
     size = document.getElementById("AdvSearchSize").value, 
     description = document.getElementById("AdvSearchDescription").value, 
     fullsearch = ply + color + cat + description + size; 
    console.log(fullsearch); 
} 
</script>