如何设置输入元素的值

How set the value of an input element?

本文关键字：输入元素设置何设置更新时间：2023-09-26

此脚本计算两个日期之间的天数，并在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>

所以你要问的问题："如何从一个字段中获取值并将其设置在另一个字段中？你想要 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>