如何以日期格式收集表单输入并在页面上显示 [英] how can I collect form input in date format and display it on page

问题描述

我正在尝试采用类型日期的表单输入并显示在页面上。

I am trying to take form input of type date and display it on page. Nothing is being displayed when

function checkin(){
    var date = document.getElementById("cInDate").value;
    var dateArray = date.split("/");<!-- puts date into dateArray->
    var s = document.getElementById("dateI");
    s.textContent = dateArray[1]"th of July";<!-- shows 2nd index of dateArray on page->
}

       
<form id="myForm">
    <!-- collects checkin date form input -->
    Check In Date: <input type="date" name="checkin" id="cInDate">
               
    <button  onclick="checkin()" >Submit</button>
</form>

<h1 class="al">Hotel Room Availability</h1>
<p class="al">You want to check in on
    <span id="dateI"></span> <!-- shows checkin date -->
</p>

推荐答案

错误是由您的评论不正确格式造成的。 <！ - content - > 定义HTML注释，但在Javascript中不起作用。对于JS，使用 // Content 或 / * Content * / 。

The errors were being caused by your comments not being formatted properly. <!-- content --> define an HTML comment, but doesn't work in Javascript. For JS, use //Content or /* Content */.

还要注意你的JS语法。注意我在函数的最后一行添加的 + 以及关闭 < / input> 和 < / p> 标签。 * RobG已经注意到这并不是绝对必要的，但它至少可以帮助我。

Also be careful about your JS syntax. Note the + I added in the last line of your function, as well as the closing </input> and </p> tags in your HTML. *As RobG has noted this isn't strictly necessary, but it helps me at least.

//this is a javascript comment
checkin = function(){
  var date = document.getElementById("cInDate").value;
  var dateArray = date.split("-");
  console.log(dateArray);
  var s = document.getElementById("dateI");
  s.textContent = dateArray[1]+"th of July";
}

<form id="myForm">
       
  Check In Date: <input type="date" id="cInDate">
                   
  <button onclick="checkin()">Submit</button>

</form>
<h1 class="al">Hotel Room Availability</h1>
  <p class="al">You want to check in on
<span id="dateI"></span></p> <!-- shows checkin date -->

：您还需要将 .split（'/'）更改为 .split（' - '），因为您可以从控制台看到，日期由分隔 - s

You also need to change .split('/') to .split('-'), because as you can see from the console, the date is separated by -s

这篇关于如何以日期格式收集表单输入并在页面上显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！