如何在javascript中获取日期输入值并将其放入innerHTML中

大家好，我正在尝试获取Javascript/Jquery中日期输入的输入值，以便将其放入innerHTML中

我有以下代码

$("#input").change(function()
  {
    document.getElementById('output').innerHTML = document.getElementById("input").value ;
  });

其中“输入”是日期选择的ID。而output是 我希望所选日期在其中可见的

它适用于文本字段输入，但不适用于日期选择。有人知道解决方案吗，最好是JQuery。

---

谢谢

这不是一个解决方案，而是一种稍微不同的方法，当您对值进行排序时—您已经在使用jQuery，并且正在使用更改事件处理程序—这意味着您可以稍微整理一下代码：

$("#input").change(function()
  {
    $('#output').html($(this).val());
  });

但是我建议您应该使用.text（）来更改输出的内容，因为您试图更改的是内容，而不是HTML元素

$("#input").change(function()
  {
    $('#output').text($(this).val());
  });

---

另一个建议是检查代码中没有重复（#input）id的元素。

这不是一个解决方案，而是一种稍微不同的方法，当您对值进行排序时，您已经在使用jQuery，并且正在使用更改事件处理程序。这意味着您可以稍微整理代码：

$("#input").change(function()
  {
    $('#output').html($(this).val());
  });

但是我建议您应该使用.text（）来更改输出的内容，因为您试图更改的是内容，而不是HTML元素

$("#input").change(function()
  {
    $('#output').text($(this).val());
  });

---

另一个建议是检查代码中没有重复（#input）id的元素。

您可以使用下面的jQuery方法实现这一点：

<script>
$("#input").change(function() {
    $('#output').append($('#input').html());
});
</script>

$（“#输入”）.change（函数（）{
$（'.'输出'）.append（$（'.'输入'）.html（））；
});

仅使用JavaScript实现相同的结果：

<script>
document.getElementById("input").onchange = function() {
    updateValue()
};

function updateValue() {
    var input = document.getElementById("input").innerHTML;
    document.getElementById("output").innerHTML = input;
}
</script>

document.getElementById（“输入”）.onchange=function（）{
updateValue（）
};
函数updateValue（）{
var input=document.getElementById（“input”）.innerHTML；
document.getElementById（“输出”）.innerHTML=输入；
}

您可以使用下面的jQuery方法实现这一点：

<script>
$("#input").change(function() {
    $('#output').append($('#input').html());
});
</script>

$（“#输入”）.change（函数（）{
$（'.'输出'）.append（$（'.'输入'）.html（））；
});

仅使用JavaScript实现相同的结果：

<script>
document.getElementById("input").onchange = function() {
    updateValue()
};

function updateValue() {
    var input = document.getElementById("input").innerHTML;
    document.getElementById("output").innerHTML = input;
}
</script>

document.getElementById（“输入”）.onchange=function（）{
updateValue（）
};
函数updateValue（）{
var input=document.getElementById（“input”）.innerHTML；
document.getElementById（“输出”）.innerHTML=输入；
}

我自己解决了这个问题。根据控制台输出，我得出结论，RubyonRails会自动为日期选择字段分配id

基于这些id，我生成了以下JQuery代码：

 $("#date_3i").change(function()
  {
    $('#output').text(($(this).val()) + ' ' + ($("#date_2i").find(":selected").text()) + ' ' +  ($("#date_1i").val()) ) ;
  });
  $("#date_2i").change(function()
  {
    $('output').text( ($("#date_3i").val()) + ' ' + ($(this).find(":selected").text()) + ' ' + ($("#date_1i").val()) ) ;
  });
  $("#date_1i").change(function()
  {
    $('output').text( ($("#date_3i").val()) + ' ' + ($("#date_2i").find(":selected").text()) + ' ' + ($(this).val()) ) ;
  });

---

案件结案，谢谢。

我自己解决了这个问题。根据控制台输出，我得出结论，RubyonRails会自动为日期选择字段分配id

基于这些id，我生成了以下JQuery代码：

 $("#date_3i").change(function()
  {
    $('#output').text(($(this).val()) + ' ' + ($("#date_2i").find(":selected").text()) + ' ' +  ($("#date_1i").val()) ) ;
  });
  $("#date_2i").change(function()
  {
    $('output').text( ($("#date_3i").val()) + ' ' + ($(this).find(":selected").text()) + ' ' + ($("#date_1i").val()) ) ;
  });
  $("#date_1i").change(function()
  {
    $('output').text( ($("#date_3i").val()) + ' ' + ($("#date_2i").find(":selected").text()) + ' ' + ($(this).val()) ) ;
  });

---

案件结案，谢谢。

可能是比赛条件？可能是您正在使用的任何日期选择器在触发更改时尚未将拾取的日期写入字段。可能是比赛条件？可能是您正在使用的任何日期选择器，在触发更改时尚未将拾取的日期写入字段。使用append（）将导致每个更改的#输入值被追加到#输出div-这意味着您将得到许多显示的值-每次更改#输入值一个。因此，如果我选择了一个日期-该日期将附加到输出中-然后我决定更改日期-原始值仍将显示在#output中，然后新值也将附加到输出中。这不是一个好的解决方案——很抱歉。此外，这就像我的回答一样，没有解决OP的问题，而是用一种更好的方式来展示它；我的回答没有考虑到这一点。使用append（）将导致每个更改的#输入值被追加到#输出div-这意味着您将得到许多显示的值-每次更改#输入值都会显示一个值。因此，如果我选择了一个日期-该日期将附加到输出中-然后我决定更改日期-原始值仍将显示在#output中，然后新值也将附加到输出中。这不是一个好的解决方案——很抱歉。此外，这就像我的回答一样，没有解决OP的问题，而是用一种更好的方式来展示它；我的回答没有考虑到这一点。