如何设置输入元素的值？ [复制]答案

【问题标题】：How set the value of an input element? [duplicate]如何设置输入元素的值？ [复制]
【发布时间】：2013-11-23 10:35:19
【问题描述】：

此脚本计算两个日期之间的天数并在span 元素上显示结果：

<span id="result"></span>

但我想将结果显示为输入元素的值：

<input name="name" type="text" id="name" value="i want count days here " />

我该怎么做？

这是完整的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Datepicker - Default functionality</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <style>
            .ui-datepicker {font-size:11px;}
        </style>
        <script>
            $(function() {
                $( "#from" ).datepicker({
                    onSelect: calculate
                });
            });
            $(function() {
                $( "#to" ).datepicker({
                    onSelect: calculate
                });
            });
        </script>
    </head>
    <body>
        <form class="formwhite">
            <table>
                <tr><td>From:</td><td><input type="text" id="from" onKeyUp="calculate();" />&nbsp;</td></tr>
                <tr><td>To:</td><td><input type="text" id="to" onKeyUp="calculate();" /></td></tr>
            </table>
        </form>
        <span id="result"></span>
        <script>
            var calculate = function() {
                var from = document.getElementById("from").value;
                var fromdate = from.slice(3, 5);
                fromdate = parseInt(fromdate);
                var frommonth = from.slice(0, 2); 
                frommonth = parseInt(frommonth);
                var fromyear = from.slice(6, 10); 
                fromyear = parseInt(fromyear);
                var to = document.getElementById("to").value;
                var todate = to.slice(3, 5); 
                todate = parseInt(todate);
                var tomonth = to.slice(0, 2); 
                tomonth = parseInt(tomonth);
                var toyear = to.slice(6, 10); 
                toyear = parseInt(toyear);
                var oneDay = 24*60*60*1000;
                var firstDate = new Date(fromyear,frommonth,fromdate);
                var secondDate = new Date(toyear,tomonth,todate);

                var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
                if (diffDays)
                    document.getElementById("result").innerHTML=diffDays;
            }
        </script>
    </body>
</html>

【问题讨论】：

这不是重复的帖子
@msalman 如果不是，那么它可能会因为过于具体而被关闭，关键是，如果您费心寻找答案，答案就在那里。
顺便说一句，你似乎没有在其中使用 jquery 或 jquery-ui，所以我将删除这些标签。
@Scott: $(function() { $( "#from" ).datepicker({ ... 看起来像 jQuery。
我不想成为那个的人，但是在谷歌上搜索 jquery set input value 会首先找到 jQuery 文档：api.jquery.com/val。我的意思是说，这是您自己解决问题所能付出的最少努力。一旦知道这一点，调整代码就很简单了，因为您只需更改设置span 内容的部分。你知道那是因为你自己写的，对吧？

标签： javascript jquery jquery-ui-datepicker

【解决方案1】：

所以你问的问题是：“我如何从一个字段中获取一个值并将其设置在另一个字段中？”你想要http://api.jquery.com/val/：

$("#name").val($("#result").val());

$("#result").val() 获取 id 为 result 的元素的任何值。

$("#name").val(value)设置id为name的元素的值

或者，只需添加（或替换）该行

document.getElementById("name").value = diffDays;

在同一个 if 块中与您所在的位置

document.getElementById("result").innerHTML = diffDays;

这是您的整个 <script> 块，添加了我的一行：

    <script>
        var calculate = function() {
            var from = document.getElementById("from").value;
            var fromdate = from.slice(3, 5);
            fromdate = parseInt(fromdate);
            var frommonth = from.slice(0, 2); 
            frommonth = parseInt(frommonth);
            var fromyear = from.slice(6, 10); 
            fromyear = parseInt(fromyear);
            var to = document.getElementById("to").value;
            var todate = to.slice(3, 5); 
            todate = parseInt(todate);
            var tomonth = to.slice(0, 2); 
            tomonth = parseInt(tomonth);
            var toyear = to.slice(6, 10); 
            toyear = parseInt(toyear);
            var oneDay = 24*60*60*1000;
            var firstDate = new Date(fromyear,frommonth,fromdate);
            var secondDate = new Date(toyear,tomonth,todate);

            var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
            if (diffDays) /* THE NEW STUFF IS RIGHT HERE*/ {
                document.getElementById("result").innerHTML=diffDays;
                document.getElementById("name").value=diffDays;
            } // THE NEW STUFF ENDS HERE
        }
    </script>

【讨论】：

我在哪里可以将这段代码放入我的代码中？
@msalman 您将结果设置为从底部算起 5 行。您也可以在此处设置名称（或者，如果您不想在result 中找到答案，请将result 替换为name。只需确保在if 块周围添加{ }。
你可以编辑我的代码吗
您不能使用innerHTML 设置输入元素的值。应该是document.getElementById("name").value = diffDays;。我认为这是一个复制和粘贴错误;)
@FelixKling 哇，我的问题编辑和答案都搞砸了。谢谢你抓住这两个。