JS/HTML関数

Question

writeOptions関数がoptionCounterを2回ログに記録する理由を理解できますか？

console.log("<option values=" + optionCounter + ">"+optionCounter); 

なぜ2番目のオプションがあるのでしょうか？

<script type = "text/javascript"> 
    function writeOptions(startNumber,endNumber) 
    { 
     var optionCounter; 
     for(optionCounter = startNumber; 
      optionCounter <= endNumber; optionCounter++) 
      { 
       document.write("<option value=" + optionCounter + ">" + optionCounter); 
      } 
    } 

    function writeMonthOptions() 
    { 
     var theMonth; 
     var monthCounter; 
     var theDate = new Date(1); 
     for(monthCounter = 0; monthCounter < 12; monthCounter++) 
      { 
       theDate.setMonth(monthCounter); 
       theMonth = theDate.toString(); 
       theMonth = theMonth.substr(4,3); 
       document.write("<option value=" + theMonth + ">" + theMonth); 
      } 
    } 

    function recalcDateDiff() 
    { 
     var myForm = document.form1; 
     var firstDay = 
      myForm.firstDay.options[myForm.firstDay.selectedIndex].value; 

     var secondDay = 
      myForm.secondDay.options[myForm.secondDay.selectedIndex].value; 

     var firstMonth = 
      myForm.firstMonth.options[myForm.firstMonth.selectedIndex].value; 

     var secondMonth = 
      myForm.secondMonth.options[myForm.secondMonth.selectedIndex].value; 

     var firstYear = 
      myForm.firstYear.options[myForm.firstYear.selectedIndex].value; 

     var secondYear = 
      myForm.secondYear.options[myForm.secondYear.selectedIndex].value; 

     var firstDate = 
      new Date(firstDay + " " + firstMonth + " " + firstYear); 

     var secondDate = new Date(secondDay + " " + secondMonth + " " + secondYear); 

     var daysDiff = (secondDate.valueOf() - firstDate.valueOf()); 

     daysDiff = Math.floor(Math.abs((((daysDiff/1000)/60)/60)/24)); 
     myForm.txtDays.value = daysDiff; 

    } 

    function window_onload() 
    { 
     var theForm = document.form1; 
     var nowDate = new Date(); 
     theForm.firstDay.options[nowDate.getDate() - 1].selected =true; 
     theForm.secondDay.options[nowDate.getDate() - 1].selected = true; 
     theForm.firstMonth.options[nowDate.getMonth() - 1].selected = true; 
     theForm.secondMonth.options[nowDate.getMonth() - 1].selected = true; 
     theForm.firstYear.options[nowDate.getFullYear() - 1970].selected = true; 
     theForm.secondYear.options[nowDate.getFullYear() - 1970].selected = true; 


    } 

    </script> 

これは、この特定の例のJavascriptコードブロック全体です。

Answer 1

私はあなたがHTMLを知っていると信じています。各<option>タグには、表示テキスト（またはラベル）と値があります。そしてあなたのコードは両方ともhtmlオプションタグを作成しています。あなたが書くときに、：

document.write("<option value=" + optionCounter + ">" + optionCounter); 

最初optionCounterは値用で2つ目は、ラベル/表示テキストのためです。

注：私は、ブラウザによって適切に処理されない場合は問題が発生する可能性があるオプションタグが閉じられている参照してくださいので、次のように正しいHTMLをレンダリングするためのステートメントを変更しないでください：

document.write("<option value=" + optionCounter + ">" + optionCounter + "</option>"); 

を参照してください。 w3schools.comのselect tag & option tagについての詳細