Javascript/Jquery -不能让日期选择器+选择验证工作

Javascript/Jquery - Can't get date picker + selection verification to work

本文关键字：选择器 选择 验证 工作 日期 Jquery 不能 Javascript      更新时间：2023-09-26

我有一些代码，我相信是正确的，但是我似乎不能让它工作。

用户将在名为"date"的输入字段中输入日期，并在名为"people"的字段中输入有多少人，根据这两个变量，他们将获得特定的成本，因此所有if语句。

我在这里错过了什么吗?

<p><input type="text" id="datepicker" name="date" value="Choose when you want to go"></p>
<select name="people" value="Are you sharing or single supplement?">
    <option value="Sharing">Sharing</option>
    <option value="Single Supplement">Single Supplement</option>
</select>
<div>
Cost:<br>
<button onclick="myFunction()">Get Cost</button>
<p id="cost"></p>
</div>
<script>
function myFunction() {
var date = document.getElementsByName("date");
var people = document.getElementsByName("people");
var month = date.substring(0, 2);
var year = date.substring(8, 10);
var time = month.concat(year);
if(people == "Sharing"){
if(time == "1015"){document.getElementById("cost").innerHTML = "18,450";}
if(time == "1115"){document.getElementById("cost").innerHTML = "19,000";}
if(time == "1215"){document.getElementById("cost").innerHTML = "19,000";}
if(time == "0116"){document.getElementById("cost").innerHTML = "19,350";}
if(time == "0216"){document.getElementById("cost").innerHTML = "19,350";}
if(time == "0316"){document.getElementById("cost").innerHTML = "19,350";}
if(time == "0416"){document.getElementById("cost").innerHTML = "18,800";}
}
if(people == "Single Supplement"){
if(time == "1015"){document.getElementById("cost").innerHTML = "11,150";}
if(time == "1115"){document.getElementById("cost").innerHTML = "11,600";}
if(time == "1215"){document.getElementById("cost").innerHTML = "11,600";}
if(time == "0116"){document.getElementById("cost").innerHTML = "11,780";}
if(time == "0216"){document.getElementById("cost").innerHTML = "11,780";}
if(time == "0316"){document.getElementById("cost").innerHTML = "11,780";}
if(time == "0416"){document.getElementById("cost").innerHTML = "11,200";}
}
}
</script>

所以应该发生的是var month取日期的前两个数字(月)，var year取日期的后两个数字(年)。然后var time将月份和年份放在一起，因此2016年1月1日(01/01/2016)将变成0116。if (people == "…")将得到您选择共享还是单独补充，然后根据日期和人数得到正确的费用。然而，当我按下按钮获取费用时，似乎什么也没有发生。

我觉得这将是一个明显的问题，但我就是看不出来。

正如Pointy向您解释的那样，.getElementsByName()返回一个DOM元素列表，您可以在这里阅读它。

因此，即使只有一个与该名称匹配的元素，也需要选择该元素，而不是列表。

你可以这样做:

var date = document.getElementsByName("date")[0];

实际上，你不需要元素，而是它的值，所以它变成了:

var date = document.getElementsByName("date")[0].value;
如果给input元素指定一个id，以这样的方式访问它们会更简洁: 
var date = document.getElementsById("myDateInput").value;

或者，如果你使用jQuery:

var date = $("#date").val();

我给你留下一个片段:

function myFunction() {
  var date = $("#date").val();
  var people = $("#people").val(); 
  var month = date.substring(0, 2);
  var year = date.substring(8, 10);
  var time = month.concat(year);
  if(people == "Sharing"){
    if(time == "1015"){$("#cost").html("18,450");}
    if(time == "1115"){$("#cost").html("19,000");}
    if(time == "1215"){$("#cost").html("19,000");}
    if(time == "0116"){$("#cost").html("19,350");}
    if(time == "0216"){$("#cost").html("19,350");}
    if(time == "0316"){$("#cost").html("19,350");}
    if(time == "0416"){$("#cost").html("18,800");}
  }
  if(people == "Single Supplement"){
    if(time == "1015"){$("#cost").html("11,150");}
    if(time == "1115"){$("#cost").html("11,600");}
    if(time == "1215"){$("#cost").html("11,600");}
    if(time == "0116"){$("#cost").html("11,780");}
    if(time == "0216"){$("#cost").html("11,780");}
    if(time == "0316"){$("#cost").html("11,780");}
    if(time == "0416"){$("#cost").html("11,200");}
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <input id="date" type="text" id="datepicker" name="date" value="Choose when you want to go">
</p>
<select id="people" name="people" value="Are you sharing or single supplement?">
  <option value="Sharing">Sharing</option>
  <option value="Single Supplement">Single Supplement</option>
</select>
<div>
  Cost:
  <br>
  <button onclick="myFunction()">Get Cost</button>
  <p id="cost"></p>
</div>

希望有帮助!

解决方案

JavaScript/jQuery 
function myFunction() {
    var date = $("#datepicker").val();
    var people = $('[name="people"]').eq(0).val();
    var month = date.substring(0, 2);
    var year = date.substring(8, 10);
    var time = month.concat(year);
    var costArray = {
        sharing: {
            1015: "18,450",
            1115: "19,000",
            1215: "19,000",
            0116: "19,350",
            0216: "19,350",
            0316: "19,350",
            0416: "18,800"
        },
        single: {
            1015: "11,150",
            1115: "11,600",
            1215: "11,600",
            0116: "11,780",
            0216: "11,780",
            0316: "11,780",
            0416: "11,200"
        }
    };
    if (people == "Sharing") {
        $("#cost").text(costArray.sharing[time]);
    } else {
        $("#cost").text(costArray.single[time]);
    }
}

JSFiddle(工作演示)

既然jQuery已经在你的代码中加载，为什么不在这个函数中使用它呢?

我修改了您获取输入值的方式，在可能的情况下使用id属性(我建议您也将id添加到select，这样更容易访问它。你可以在这里阅读更多关于jQuery和如何使用它的选择器(learn.jquery.com)

注意:使用id属性的原因很简单:这是一个唯一的值来标识你的元素。

这意味着这是唯一具有id值的元素(如果你的HTML结构是有效的)，因此使访问该元素变得非常简单，因为使用name或class属性将返回一个元素数组，而不是元素本身。

我创建了一个对象(叫做costArray，不知道为什么)，它包含两个子对象:sharing和single。它们都可以这样访问:costArray.sharing(被认为是对象属性)。你可以在这里(MDN)阅读更多关于对象的信息。

我通过在这些对象中存储可能的time值及其相关成本来简化所有条件语句，因此每当您执行costArray.sharing[1115]时，它将访问与该时间值相关的成本。

访问id为"cost"的元素使用jQuery: $('#cost')。然后我简单地改变它的内容:$('#cost').text("myText")(替换"myText"与时间相关联的成本值)。

这使得代码更容易阅读，更实用，更高效(它不必遍历所有if语句，只需访问所需的值)。

相关文章：