자바 스크립트에서 데이터를 가져올 수 없습니다. 양식

자바 스크립트에서 HTML을 선택하여 일년을 보내고 싶습니다. 그러나 데이터를 읽어야하는 자바 스크립트 기능을 찾을 수 없습니다. 여기 자바 스크립트에서 데이터를 가져올 수 없습니다. 양식

는

<html> 
<head> 
    <SCRIPT language="JavaScript" SRC="./js/calendar.js"></SCRIPT> 
</head> 

<body onload="yearList()"> 
    <div id="form"> 
     <table> 
      <form name="cal_form"> 
       <tr> 
        <td>Month:</td> 
        <td> 
         <select name="month"> 
          <option value="January">January</option> 
          <option value="February">February</option> 
          <option value="March">March</option> 
          <option value="April">April</option> 
          <option value="May">May</option> 
          <option value="June">June</option> 
          <option value="July">July</option> 
          <option value="August">August</option> 
          <option value="September">September</option> 
          <option value="October">October</option> 
          <option value="November">November</option> 
          <option value="December">December</option> 
         </select> 
        </td> 
       </tr> 
       <tr> 
        <td>Year:</td> 
        <td id="yearoptiondiv"> 

        </td> 
       </tr> 
       <tr> 
        <td colspan="2"> 
         <button type="button" onclick="drawCalendar(gen_cal_settings())">Draw Calendar</button> 
        </td> 
       </tr> 


      </form> 
     </table> 
    </div> 
    <div id="calendar"></div> 
</body>

그리고 여기가 올해의 목록에 대한 onload 이벤트에서 실행됩니다 calendar.js

function drawCalendar(cal_settings){ 
var calendarTable; 

calendarTable += '<table>'; 
calendarTable += '<tr>'; 
calendarTable += '<td colspan="2">'; 
calendarTable += cal_settings["month"] + " " + cal_settings["year"]; 
calendarTable += '</td>'; 
calendarTable += '</tr>'; 
calendarTable += '</table>'; 
document.getElementById("calendar").innerHTML=calendarTable; 
} 

function yearList(){ 
var x="",i; 
x += "<select name='year'>"; 
for (i=2011;i<=3012;i++) 
{ 
    x += "<option value='" + i + "'>" + i + "</option>"; 
} 
x += "</select>"; 
document.getElementById("yearoptiondiv").innerHTML=x; 
} 

function gen_cal_settings(){ 
var cal_settings = new Array(); 
cal_settings["month"]=document.forms['cal_form']['month'].value;  
cal_settings["year"]=document.forms['cal_form']['year'].value; 
return cal_settings;  
}

코드입니다 index.html을위한 코드입니다 페이지의 본문. 내가 뭘 잘못하고 있니?

출처

2012-07-05 Talon06

에

<table> <form name="cal_form"> .............. .............. .............. </form> </table>

변경이 :(당신의 HTML에 인라인 너무 많은 코드를 사용하지 않도록 시도하십시오, 그것은 정말 이상 유지할의 침입이 아닌 고려하십시오. javascript 및 addEventListener를 대신 사용하여 이벤트 리스너 추가 –

어떻게해야합니까? – Talon06

왜 눈에 거슬리는 자바 스크립트를 통해 : http://en.wikipedia.org/wiki/Unobtrusive_JavaScript. 예를 들어, 이벤트 리스너를 함수 (예 : onClick)에 추가하려면 대부분의 최신 브라우저에 내장 된 addEventListener 메서드를 사용하거나 더 나은 방법으로 jQuery를 사용합니다. –

선택 항목에 옵션 배열이 포함되어 있으면 select 값에 액세스하고 있습니다. 필요한 것은 선택 값의 값이며 선택 값이 아닙니다. 못생긴

document.forms["cal_form"]["year"].options[document.forms["cal_form"]["year"].selectedIndex].value

그러나 사람 :

당신은 뭔가를 원하는 것입니다. 벤자민 그루 엔 바움 (Benjamin Gruenbaum)이 제안한 것을 구현하고이 코드를 당신이 작성하는 자바 스크립트를보다 잘 관리하고 읽을 수있게 해주는 핸들러로 옮겨야한다. 그러면 개발자가 문서를 읽을 때마다 문서에서 액세스하는 대신 양식을 참조 할 수있게된다. 그것으로부터 데이터가 필요합니다.

편집

은 내가 JSFiddle에 코드를 던져 그것으로했다. 내가 볼 수있는 것은 당신의 select가 document.forms["cal_form"]에서 반환되는 폼 객체의 일부가 아니라는 것입니다. 이것이 Javascript를 통해 전체 폼을 생성하거나 요소에 액세스하는 방법을 변경해야한다는 것입니다. 대신 이름의 id에 의해 (document.getElementByID("id")를 사용하여.

나는 또한 내장 된 HTML의 문자열을 추가 할 "innerHTML을"을 사용하지 않는 것이 좋습니다. 제가 추천 DOM을 통해 요소를 구축하는 예는 다음과 같이 당신의 yearList 기능이있는 :

function yearList(){ 
    var select, option, year; 
    select = document.createElement("select"); 
    select.setAttribute("name", "year"); 
    select.setAttribute("id", "year"); // For use accessing by ID and not name 
    for (i = 2011; i <= 3012; ++i) 
    { 
    option = document.createElement("option"); 
    option.setAttribute("value", year); 
    option.innerHTML = year; 
    select.appendChild(option); 
    } 
    document.getElementById("yearoptiondiv").appendChild(select); 
}

그리고 당신은 값에 액세스해야하는 경우 :

을

document.getElementById("year").value;

출처

2012-07-05 16:59:25

고마워, 나는 그의 제안을 볼 것이다 – Talon06

내가 가지고있는 문제는 그 선택이 페이지를로드하는 것에 자바 스크립트로 생성 되었기 때문에 버튼이 그것을 보지 못한다는 것이다. 페이지 기능이 내가 원하는 것을 얻는 방법을 바꾸어야한다고 생각합니다. 게으르지 마시고 jquery를 다시 배우십시오. 다시 한번 – Talon06

.value 항상 select에서 작동합니다. selectedIndex를 사용할 필요가 없습니다 – gaurang171

문제는 HTML에 있습니다.

당신은 할 수 없습니다. 그리고 나서

다음과 같이 변경하면 작동합니다. 그 이유는. 잘못된 HTML 형식을 사용하면 적절한 레이아웃을 얻을 수 없으므로 새로운 요소를 추가 할 수 없습니다. 잘못된

: 내 눈을 아프게하십시오

<form name="cal_form"> 
    <table> 

      .............. 
      .............. 
      .............. 


    </table> 
</form>

출처

2012-07-05 17:07:46 gaurang171

내 질문에 더 많은 코드를 추가했습니다. 그것은 내가 어떻게 스크립트를 호출하고 잘하면 내가 뭘 잘못하고 있는지 보여 주어야합니다. – Talon06

내 대답을 수정했습니다 – gaurang171

흠, 나는 심지어 그것을 잡지 못했습니다. 좋은 눈. –

자바 스크립트에서 데이터를 가져올 수 없습니다. 양식

답변

관련 문제