title: How to focus on a specific day on a calender with Javascript
body: <p>I recently made my own calendar using html and CSS, now I want the calendar to have the possibility to choose a day and month from the dropdown list, so when I choose a date it will focus on the day and change its color</p>
  
  <p>I have done some coding with Javascript but problem is it takes to much lines in Javascript, anyone knows an easier way?</p>
  
  <p>JS Code:</p>
  
  <pre><code>        function selectDay() {
              var day = document.getElementById("day");
              var month = document.getElementById("month");
               var type = document.getElementById("type");
              var selectedValueday = day.options[day.selectedIndex].value;
              var selectedValuemonth = month.options[month.selectedIndex].value;
              var selectedValuetype = type.options[type.selectedIndex].value;
  
  
              if ((selectedValueday === "01") &amp;&amp; (selectedValuemonth === "01") &amp;&amp; (selectedValuetype === "01")) {
                  document.getElementById('jan1').style.backgroundColor = 'purple';
              } else if((selectedValueday === "01") &amp;&amp; (selectedValuemonth === "01") &amp;&amp; (selectedValuetype === "02")){
                  document.getElementById('jan1').style.backgroundColor = 'yellow';
              }else{
                  document.getElementById('jan1').style.backgroundColor = 'white';
              }
            if ((selectedValueday === "02") &amp;&amp; (selectedValuemonth === "01") &amp;&amp; (selectedValuetype === "01")) {
                  document.getElementById('jan2').style.backgroundColor = 'purple';
              } else if((selectedValueday === "02") &amp;&amp; (selectedValuemonth === "01") &amp;&amp; (selectedValuetype === "02")){
                  document.getElementById('jan2').style.backgroundColor = 'yellow';
              }else{
                  document.getElementById('jan2').style.backgroundColor = 'white';
              }
          }
  </code></pre>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;select id="day"&gt;
          &lt;option&gt;Kies een dag&lt;/option&gt;
          &lt;option value="01"&gt;01&lt;/option&gt;
          &lt;option value="02"&gt;02&lt;/option&gt;
          &lt;option value="03"&gt;03&lt;/option&gt;
          &lt;option value="04"&gt;04&lt;/option&gt;
          &lt;option value="05"&gt;05&lt;/option&gt;
          &lt;option value="06"&gt;06&lt;/option&gt;
          &lt;option value="07"&gt;07&lt;/option&gt;
          &lt;option value="08"&gt;08&lt;/option&gt;
          &lt;option value="09"&gt;09&lt;/option&gt;
          &lt;option value="10"&gt;10&lt;/option&gt;
          &lt;option value="11"&gt;11&lt;/option&gt;
          &lt;option value="12"&gt;12&lt;/option&gt;
          &lt;option value="13"&gt;13&lt;/option&gt;
          &lt;option value="14"&gt;14&lt;/option&gt;
          &lt;option value="15"&gt;15&lt;/option&gt;
          &lt;option value="16"&gt;16&lt;/option&gt;
          &lt;option value="17"&gt;17&lt;/option&gt;
          &lt;option value="18"&gt;18&lt;/option&gt;
          &lt;option value="19"&gt;19&lt;/option&gt;
          &lt;option value="20"&gt;20&lt;/option&gt;
          &lt;option value="21"&gt;21&lt;/option&gt;
          &lt;option value="22"&gt;22&lt;/option&gt;
          &lt;option value="23"&gt;23&lt;/option&gt;
          &lt;option value="24"&gt;24&lt;/option&gt;
          &lt;option value="25"&gt;25&lt;/option&gt;
          &lt;option value="26"&gt;26&lt;/option&gt;
          &lt;option value="27"&gt;27&lt;/option&gt;
          &lt;option value="28"&gt;28&lt;/option&gt;
          &lt;option value="29"&gt;29&lt;/option&gt;
          &lt;option value="30"&gt;30&lt;/option&gt;
          &lt;option value="31"&gt;31&lt;/option&gt;
      &lt;/select&gt;
      &lt;select id="month"&gt;
          &lt;option&gt;Kies een maand&lt;/option&gt;
          &lt;option value="01"&gt;01&lt;/option&gt;
          &lt;option value="02"&gt;02&lt;/option&gt;
          &lt;option value="03"&gt;03&lt;/option&gt;
          &lt;option value="04"&gt;04&lt;/option&gt;
          &lt;option value="05"&gt;05&lt;/option&gt;
          &lt;option value="06"&gt;06&lt;/option&gt;
          &lt;option value="07"&gt;07&lt;/option&gt;
          &lt;option value="08"&gt;08&lt;/option&gt;
          &lt;option value="09"&gt;09&lt;/option&gt;
          &lt;option value="10"&gt;10&lt;/option&gt;
          &lt;option value="11"&gt;11&lt;/option&gt;
          &lt;option value="12"&gt;12&lt;/option&gt;
      &lt;/select&gt;
      &lt;select id="type"&gt;
          &lt;option&gt;Kies een type&lt;/option&gt;
          &lt;option value="01"&gt;Feestdag&lt;/option&gt;
          &lt;option value="02"&gt;Verjaardag&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;button onclick="selectDay();"&gt;Zoek&lt;/button&gt;
  
          &lt;h1 align='center'&gt;Jaarkalender 2013&lt;/h1&gt;
          &lt;table align='center' width = '1600'  border = '0'&gt;
              &lt;tr&gt;
                  &lt;td ALIGN="center"&gt;&lt;B&gt;Januari&lt;/B&gt;
                      &lt;table  height = '175' border = '0'&gt;
                          &lt;tr&gt;
                              &lt;TD bgcolor='B9B1B1'&gt;&lt;b&gt;&lt;b&gt;Maandag&lt;/b&gt;&lt;/b&gt;&lt;FONT COLOR="B9B1B1"&gt;.&lt;/FONT&gt;&lt;/TD&gt;
                              &lt;TD bgcolor='B9B1B1'&gt;&lt;b&gt;Dinsdag&lt;/b&gt; &lt;FONT COLOR="B9B1B1"&gt;.&lt;/FONT&gt;&lt;/TD&gt;        
                              &lt;TD bgcolor='B9B1B1'&gt;&lt;b&gt;Woensdag&lt;/b&gt; &lt;FONT COLOR="B9B1B1"&gt;.&lt;/FONT&gt;&lt;/TD&gt;
                              &lt;TD bgcolor='B9B1B1'&gt;&lt;b&gt;Donderdag&lt;/b&gt; &lt;FONT COLOR="B9B1B1"&gt;.&lt;/FONT&gt;&lt;/TD&gt;
                              &lt;TD bgcolor='B9B1B1'&gt;&lt;b&gt;Vrijdag&lt;/b&gt; &lt;FONT COLOR="B9B1B1"&gt;.&lt;/FONT&gt;&lt;/TD&gt;
                              &lt;TD bgcolor='B9B1B1'&gt;&lt;b&gt;Zaterdag&lt;/b&gt; &lt;FONT COLOR="B9B1B1"&gt;.&lt;/FONT&gt;&lt;/TD&gt;
                              &lt;TD bgcolor='B9B1B1'&gt;&lt;b&gt;Zondag&lt;/b&gt; &lt;FONT COLOR="B9B1B1"&gt;.&lt;/FONT&gt;&lt;/TD&gt;
                          &lt;/tr&gt;
                          &lt;TR&gt;
                              &lt;TD&gt;&lt;font color="#888888"&gt;30&lt;/font&gt;&lt;/TD&gt;
                              &lt;TD id="jan1" title = 'Nieuwjaar'&gt;&lt;font color = '#FF0000'&gt;&lt;B&gt;1&lt;/B&gt;&lt;/TD&gt;
                              &lt;TD id="jan2"&gt;2&lt;/TD&gt;
                              &lt;TD&gt;3&lt;/TD&gt;
                              &lt;TD&gt;4&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;5&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;6&lt;/TD&gt;
                          &lt;/TR&gt;
                          &lt;TR&gt;
                              &lt;TD&gt;7&lt;/TD&gt;
                              &lt;TD&gt;8&lt;/TD&gt;
                              &lt;TD&gt;9&lt;/TD&gt;
                              &lt;TD&gt;10&lt;/TD&gt;
                              &lt;TD&gt;11&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;12&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;13&lt;/TD&gt;
                          &lt;/TR&gt;
                          &lt;TR&gt;
                              &lt;TD&gt;14&lt;/TD&gt;
                              &lt;TD&gt;15&lt;/TD&gt;
                              &lt;TD&gt;16&lt;/TD&gt;
                              &lt;TD&gt;17&lt;/TD&gt;
                              &lt;TD&gt;18&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;19&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;20&lt;/TD&gt;
                          &lt;/TR&gt;
                          &lt;TR&gt;
                              &lt;TD&gt;21&lt;/TD&gt;
                              &lt;TD&gt;22&lt;/TD&gt;
                              &lt;TD&gt;23&lt;/TD&gt;
                              &lt;TD&gt;24&lt;/TD&gt;
                              &lt;TD&gt;25&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;26&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;27&lt;/TD&gt;
                          &lt;/TR&gt;
                          &lt;TR&gt;
                              &lt;TD&gt;28&lt;/TD&gt;
                              &lt;TD&gt;29&lt;/TD&gt;
                              &lt;TD&gt;30&lt;/TD&gt;
                              &lt;TD&gt;31&lt;/TD&gt;
                              &lt;TD&gt;&lt;font color="#888888"&gt;1&lt;/font&gt;&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;&lt;font color="#888888"&gt;2&lt;/font&gt;&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;&lt;font color="#888888"&gt;3&lt;/font&gt;&lt;/TD&gt;
                          &lt;/TR&gt;
                          &lt;TR&gt;
                              &lt;TD&gt;&lt;/TD&gt;
                              &lt;TD&gt;&lt;/TD&gt;
                              &lt;TD&gt;&lt;/TD&gt;
                              &lt;TD&gt;&lt;/TD&gt;
                              &lt;TD&gt;&lt;/TD&gt;
                              &lt;TD  bgcolor='#00FFFF'&gt;&lt;/TD&gt;
                              &lt;TD  bgcolor='#00FFFF'&gt;&lt;/TD&gt;
                          &lt;/TR&gt;
                      &lt;/table&gt;
                  &lt;/TD&gt;
  
                  &lt;td ALIGN="center"&gt;&lt;B&gt;Februari&lt;/B&gt;
                      &lt;table border = '0' height = '175'&gt;
                          &lt;tr&gt;
                              &lt;TD bgcolor='B9B1B1'&gt;&lt;b&gt;&lt;b&gt;Maandag&lt;/b&gt;&lt;/b&gt; &lt;FONT COLOR="B9B1B1"&gt;.&lt;/FONT&gt;&lt;/TD&gt;
                              &lt;TD bgcolor='B9B1B1'&gt;&lt;b&gt;Dinsdag&lt;/b&gt; &lt;FONT COLOR="B9B1B1"&gt;.&lt;/FONT&gt;&lt;/TD&gt;        
                              &lt;TD bgcolor='B9B1B1'&gt;&lt;b&gt;Woensdag&lt;/b&gt; &lt;FONT COLOR="B9B1B1"&gt;.&lt;/FONT&gt;&lt;/TD&gt;
                              &lt;TD bgcolor='B9B1B1'&gt;&lt;b&gt;Donderdag&lt;/b&gt; &lt;FONT COLOR="B9B1B1"&gt;.&lt;/FONT&gt;&lt;/TD&gt;
                              &lt;TD bgcolor='B9B1B1'&gt;&lt;b&gt;Vrijdag&lt;/b&gt; &lt;FONT COLOR="B9B1B1"&gt;.&lt;/FONT&gt;&lt;/TD&gt;
                              &lt;TD bgcolor='B9B1B1'&gt;&lt;b&gt;Zaterdag&lt;/b&gt; &lt;FONT COLOR="B9B1B1"&gt;.&lt;/FONT&gt;&lt;/TD&gt;
                              &lt;TD bgcolor='B9B1B1'&gt;&lt;b&gt;Zondag&lt;/b&gt; &lt;FONT COLOR="B9B1B1"&gt;.&lt;/FONT&gt;&lt;/TD&gt;
                          &lt;/tr&gt;
                          &lt;TR&gt;
                              &lt;TD&gt;&lt;font color="#888888"&gt;28&lt;/font&gt;&lt;/TD&gt;
                              &lt;TD&gt;&lt;font color="#888888"&gt;29&lt;/font&gt;&lt;/TD&gt;
                              &lt;TD&gt;&lt;font color="#888888"&gt;30&lt;/font&gt;&lt;/TD&gt;
                              &lt;TD&gt;&lt;font color="#888888"&gt;31&lt;/font&gt;&lt;/TD&gt;
                              &lt;TD&gt;1&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;2&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;3&lt;/TD&gt;
                          &lt;/TR&gt;
                          &lt;TR&gt;
                              &lt;TD&gt;4&lt;/TD&gt;
                              &lt;TD&gt;5&lt;/TD&gt;
                              &lt;TD&gt;6&lt;/TD&gt;
                              &lt;TD&gt;7&lt;/TD&gt;
                              &lt;TD&gt;8&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;9&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;10&lt;/TD&gt;
                          &lt;/TR&gt;
                          &lt;TR&gt;
                              &lt;TD&gt;11&lt;/TD&gt;
                              &lt;TD&gt;12&lt;/TD&gt;
                              &lt;TD&gt;13&lt;/TD&gt;
                              &lt;TD&gt;14&lt;/TD&gt;
                              &lt;TD&gt;15&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;16&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;17&lt;/TD&gt;
                          &lt;/TR&gt;
                          &lt;TR&gt;
                              &lt;TD&gt;18&lt;/TD&gt;
                              &lt;TD&gt;19&lt;/TD&gt;
                              &lt;TD&gt;20&lt;/TD&gt;
                              &lt;TD&gt;21&lt;/TD&gt;
                              &lt;TD&gt;22&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;23&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;24&lt;/TD&gt;
                          &lt;/TR&gt;
                          &lt;TR&gt;
                              &lt;TD&gt;25&lt;/TD&gt;
                              &lt;TD&gt;26&lt;/TD&gt;
                              &lt;TD&gt;27&lt;/TD&gt;
                              &lt;TD&gt;28&lt;/TD&gt;
                              &lt;TD&gt;&lt;font color="#888888"&gt;1&lt;/font&gt;&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;&lt;font color="#888888"&gt;2&lt;/font&gt;&lt;/TD&gt;
                              &lt;TD bgcolor='#00FFFF'&gt;&lt;font color="#888888"&gt;3&lt;/font&gt;&lt;/TD&gt;
                          &lt;/TR&gt;
                      &lt;/table&gt;
                  &lt;/TD&gt;  
          &lt;/table&gt;
  </code></pre>
  
  <p>CSS Code:</p>
  
  <pre><code>        table{
  
              left: -200px;
              border-collapse:collapse;
              border:1px solid black;
          }
  </code></pre>