无法将函数中的值传递给文本框

时间:2016-06-10 17:46:03

标签: javascript

我是JavaScript的新手,我需要一些帮助。我试图从我的HTML文档的<head>中的函数传递一个值,以便它在页面加载后运行,我无法弄清楚如何从函数传递值到文档<body>中表单内的文本框。

alert ('Starting now');
function calc(){
    const FEES=14.5;
    const DUES=5;
    var cFees;
    var lDues; 
    cFees=FEES * 16;
    lDues=DUES * 16;
    document.getElementById("league");
    }

alert('Finished');

我无法理解我想要做的是将cFees的值传递给ID为&#34; league&#34;的文本框。警报表示它实际上正在开始/结束。

编辑:这是我想将值传递给

的代码
<form>
</div> 
<div id="righta">
<input type="text" name="league"  id="league" readonly />League Dues
<br />
<input type="text" name="fee"  id="fee" readonly />Golf Course Fees
<br />
<input type="text" name="total"  id="total" readonly />Total for the Season
</div> 
</form>

3 个答案:

答案 0 :(得分:1)

您需要设置其value属性:

document.getElementById('league').value = cFees;

如果您将其传递给HTML元素,您可能希望使用innerHTML而不是......

e.g。 <div id="divTest"></div>

document.getElementById('divTest').innerHTML = cFees;

如果您希望在页面加载时运行它,那么将一个事件监听器添加到窗口...

window.addEventListener(
    'load',
    function() {
        document.getElementById('league').value = cFees;
    },
    false);

完整代码示例

这是一个完整的HTML示例,显示了根据calc()函数相应更新的字段。我已将此设置为更新窗口的负载,但如果您愿意,可以通过其他事件进行设置。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function calc() {
                const FEES = 14.5;
                const DUES = 5;
                var cFees = FEES * 16;
                var lDues = DUES * 16;
                document.getElementById('txtFees').value = cFees.toFixed(2);
                document.getElementById('txtDues').value = lDues.toFixed(2);
            }

            window.addEventListener('load', calc, false);
        </script>
    </head>
    <body>
        <input id="txtFees" type="text" value="" readonly>
        <input id="txtDues" type="text" value="" readonly>
    </body>
</html>

答案 1 :(得分:0)

window.onload = function() {
  //body of your func
  document.getElementById("league"). value = cFees;
};

答案 2 :(得分:0)

您的功能无法从头部编辑html。如果它必须在头部,你需要创建一个事件监听器。

window.addEventListener( 'load', function() { calc(); }, false);