无法使用javascript赋值

Question

I've tried various things found here on SO, but I cannot get this to work. 我已经尝试过在SO上找到的各种方法，但是我无法使它起作用。 Below is my entire HTML test document. 以下是我的整个HTML测试文档。 I'm loading it with the following url: 我正在使用以下网址加载它：

file:///Users/aaronbratcher/Documents/Tester.html?Donor.firstName=John&Donor.lastNameBusiness=Smith

What I'm expecting is for the 2 text fields to be populated by the javascript with the values passed on the URL, however they are not being populated. 我期望的是2个文本字段由javascript用URL上传递的值填充，但是没有填充它们。 The log messages indicate everything is found as expected. 日志消息表明可以按预期找到所有内容。 No errors or warnings reported. 没有错误或警告的报告。

What am I doing wrong? 我究竟做错了什么？

Thanks. 谢谢。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Accept Donation</title>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name = "viewport" content = "width = 320, initial-scale = 1, user-scalable = no">
    </head>

    <body>
    <form name="AcceptDonation" action="http://localhost" onsubmit="return review()" method="get">
        <H2>Donor Name</H2>
        <div class="table-field">
            <input type="text" class = "textField fullWidth" name = "Donor.firstName" id="firstName" autocorrect="off" placeholder="First Name">
        </div>
        <div class="table-field bottom">
            <input type="text" class="textField fullWidth" name = "Donor.lastNameBusiness" id="lastName" autocorrect="off" placeholder="Last Name">
        </div>
        </form>

        <script type='text/javascript'>
        var urlParameters = {}
        var kMinReceiptRequiredAmount = 250

         window.onload = function () {
            loadParameters()
        }

        function loadParameters() {
            var url = window.location.search.substring(1)
            var parts = url.split("&")
            for (var i=0; i < parts.length; i++) {
                var parameter = parts[i]
                var parameterParts = parameter.split("=")
                var parameterKey = decodeURI(parameterParts[0])
                var parameterValue = decodeURI(parameterParts[1])

                var docObject = document.getElementsByName(parameterKey)
                console.log(docObject)
                console.log(parameterValue)
                if (docObject) {
                    docObject.value = parameterValue
                }
            }           
        }
        </script>
    </body>
</html>

Answer 1

The .getElementsByName() function returns a list of elements, even if there's only one on the page that matches. .getElementsByName()函数返回元素列表，即使页面上只有一个匹配的元素也是如此。

  if (docObject && docObject.length)
    docObject[0].value = parameterValue;

You don't really need to test whether the return value is non-empty because .getElementsByName() always returns a NodeList. 您实际上不需要测试返回值是否为非空，因为.getElementsByName()始终返回NodeList。

  if (docObject.length)
    docObject[0].value = parameterValue;

Answer 2

You are using getElementsByName which returns a nodeList . 您正在使用getElementsByName ，它返回一个nodeList 。 So when you're setting the value of the text field element you need to access it from the list similar to the way you would if it were in an array. 因此，当您设置文本字段元素的值时，您需要从列表中访问它，就像在数组中一样。

var docObject = document.getElementsByName(parameterKey)
console.log(docObject)
console.log(parameterValue)
if (docObject.length) {
    docObject[0].value = parameterValue
}

If possible I would change it so you're looking up the element by id rather than name . 如果可能的话，我会更改它，以便您通过id而不是name查找元素。 Using getElementsByName is useful if there are multiple fields with that name. 如果有多个具有该名称的字段，则使用getElementsByName很有用。 Using getElementById is useful if there is only one field with that id, and then you won't need to worry about working with a nodeList 如果只有一个具有该ID的字段，则使用getElementById很有用，这样您就不必担心使用nodeList

无法使用javascript赋值

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-08-27 15:30:14

解决方案2
0 2014-08-27 15:47:15

无法使用javascript赋值

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-08-27 15:30:14

解决方案2 0 2014-08-27 15:47:15

解决方案1
0 已采纳 2014-08-27 15:30:14

解决方案2
0 2014-08-27 15:47:15