在Javascript中获取正确的元素

Getting the Right Elements in Javascript

本文关键字：元素 获取 Javascript      更新时间：2023-09-26

我有一个简单的小javascript，我已经以不同的形式使用了很多次。它与两个日期选择器一起使用，以便将第一个日期选择器中的选定日期复制到第二个日期选择器中。它看起来像这样:

MouseOver = true;
function date_copy_set() {
    FirstMouseOver = true;
}
function date_copy() {
    if (FirstMouseOver && MouseOver) {
        frames.booking.DepartureDate.value=frames.booking.ArrivalDate.value;
        FirstMouseOver = false;
        MouseOver = false;
    } else {
    }
}

现在我有一个新的应用程序的脚本，其中有几个非常相似的版本的表单在页面上，我还没有能够得到脚本的工作。该表格将有2到8个版本，其简化形式为:

<form action="/book/book1.php" method="post" target="_blank"
 id="booking_<?php echo $row_season['season_id'] ?>" name="booking">
<input name="ArrivalDate" id="ArrivalDate" class="datebox"
 size="10" onBlur="date_copy_set()" type="date">
<input name="DepartureDate" id="DepartureDate" class="datebox"
 size="10" onFocus="date_copy()" type="date"> 
<a href="javascript:void()" 
 onclick="frames.booking_<?php echo $row_season['season_id'] ?>.submit()"
 class="buttonPriceBook">Enquire or Book</a></td>
</form>

在id中包含season_id确保所有id都是唯一的，因此提交按钮可以工作。然而，我不能看到一个整洁的方法来做同样的事情与脚本复制日期。我已经尝试了getElementsByName和getElementsByClassName的各种排列，没有任何成功。

如果表单中的输入都具有相同的名称，即ArrivalDate和DepartureDate，那么您可以通过使用this:

将值传递给调用侦听器的元素来将值从一个复制到另一个。
<input name="ArrivalDate" ... onblur="date_copy_set(this)" ...>
<input name="DepartureDate" ... onblur="date_copy_set(this)" ...>

现在在方法中:

function date_copy_set(element) {
  if (element.name == 'ArrivalDate') {
    element.form.DepartureDate.value = element.value;
  } else if (element.name == 'DepartureDate') {
    element.form.ArrivalDate.value = element.value;
  }
}

这样，如果到达日期更改，它将设置出发日期，反之亦然。

注意每个输入对必须是不同的形式，ID属性是不必要的。

其他一些东西-总是声明变量:

var FirstMouseOver, MouseOver = true;

使用:

提交表单
<a href="javascript:void()" 
 onclick="frames.booking_<?php echo $row_season['season_id'] ?>.submit()"
 class="buttonPriceBook">Enquire or Book</a>

对我来说没有任何意义，只需使用提交按钮。至少，不要使用带有修改过的href属性的A元素，而应该使用有样式的span或其他更合适的元素。

相关文章：