title: jquery: how to use value of <input type ="time">
body: <p>I'm trying to create my own app on mobile, in Tizen OS. As it has an alarm function, I need to get the time from user.  So, I put this code in HTML:</p>
  
  <p><strong>HTML</strong> part of 2nd page</p>
  
  <pre><code>   &lt;div data-role="content"&gt;
          &lt;p&gt; room name : &lt;div class = "roomNameOutput"&gt;&lt;/div&gt;&lt;/p&gt;
          &lt;p&gt; your name  : &lt;div class = "userNameOutput"&gt;&lt;/div&gt;&lt;/p&gt;
          &lt;p&gt; zombie num : &lt;input type = "number" id = "zombieNumInput"&gt;&lt;/input&gt;&lt;/p&gt;
          &lt;p&gt; zombie time : &lt;input type = "time" id = "zombieTimeInput"&gt;&lt;/input&gt;&lt;/p&gt;
          &lt;p&gt; finish time : &lt;input type = "time" id = "finishTimeInput"&gt;&lt;/input&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div data-role="footer" data-position="fixed"&gt;
          &lt;a href="#host_page1" data-role="button" id = "hostRefreshButton"&gt;Refresh&lt;/a&gt;
          &lt;a href="#join_page2" data-role="button" id = "hostStartButton"&gt;Start Game&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>HTML</strong> part of 3th page</p>
  
  <pre><code>  &lt;div data-role="content"&gt;
      &lt;h1&gt;start game!&lt;/h1&gt;
      &lt;p&gt; room name : &lt;div class = "roomNameOutput"&gt;&lt;/div&gt;&lt;/p&gt;
      &lt;p&gt; user name  : &lt;div class = "userNameOutput"&gt;&lt;/div&gt;&lt;/p&gt;
      &lt;p&gt; zombie num  : &lt;div class = "zombieNumOutput"&gt;&lt;/div&gt;&lt;/p&gt;
      &lt;p&gt; zombie time  : &lt;div class = "zombieTimeOutput"&gt;zombieTimeOutput Default Text&lt;/div&gt;&lt;/p&gt;
          &lt;p&gt; finish time : &lt;div class = "finishTimeOutput"&gt;&lt;/div&gt;&lt;/p&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$("#hostStartButton").click(function(){
      zombieNum = $("#zombieNumInput").val();
      zombieTime= $("#zombieTimeInput").val();
      finishTime= $("#finishTimeInput").val();
      $(".zombieNumOutput").text(zombieNum);
      $(".zombieTimeOutput").html(zombieTime);
      $(".finishTimeOutput").text(finishTime);
      console.log("ZT==" + zombieTime);
      console.log($("#finishTimeInput").val());
  });
  </code></pre>
  
  <p><strong>zombieNum</strong> works well. I can get input of it and show it but, <strong>zombieTime</strong> doesn't.</p>
  
  <p>on <strong>zombieNumOutput</strong>, <strong>zombieNum</strong> displayed well on <strong>zombieTimeOutput</strong>, <strong>zombieTime</strong> doesn't appear. and [zombieTimeOutput Default Text] dissapear.</p>
  
  <pre><code>&lt;p&gt; zombie num  : &lt;div class = "zombieNumOutput"&gt;&lt;/div&gt;&lt;/p&gt;
  &lt;p&gt; zombie time  : &lt;div class = "zombieTimeOutput"&gt;zombieTimeOutput Default Text&lt;/div&gt;&lt;/p&gt;
  </code></pre>
  
  <p>furthermore, only "ZT==" and "" appear on console</p>
  
  <pre><code>console.log("ZT==" + zombieTime);
  console.log($("#finishTimeInput").val());
  </code></pre>