未捕获的类型错误:不能设置null的属性值。

I'm trying to pass the entered text to the controller using an ajax request. But i'm getting athe error "Uncaught TypeError: Cannot set property 'value' of null " when I tried to execute JS file..

我尝试使用ajax请求将输入的文本传递给控制器。但是，我在尝试执行JS文件时，遇到了“未捕获的类型错误:无法设置属性值”的错误。

Here is the HTMLcode:

这是HTMLcode:

<form action="">
    <input type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
    <input type="button" class="searchbox_submit1" name="submit" value="text" onClick="javascript:getSearchText();">
</form>

Here is the JS code:

下面是JS代码:

function getSearchText() {
    var searchText = document.getElementByName("search").value;
    h_url=document.getElementById("u").value;
    var theURL = h_url+'search_all/' + deptid + '/' + searchText + '/1';
    $.ajax({
        url : theURL,
        fail: function(){
        },
        success : function() {
        },
        error:function(){
        }
    });
}

Please help me to fix this.

请帮我解决这个问题。

7 个解决方案

#1

You don't have an element with the id u.That's why the error occurs. Note that the global variable document.getElementById("u").value means you are trying to get the value of input element with name u and its not defined in your code.

你没有id u的元素。这就是错误发生的原因。注意，全局变量document。getelementbyid(“u”)。值意味着您试图获取输入元素的值，并在代码中没有定义名称u。

#2

The problem may where the code is being executed. If you are in the head of a document executing JavaScript, even when you have an element with id="u" in your web page, the code gets executed before the DOM is finished loading, and so none of the HTML really exists yet... You can fix this by moving your code to the end of the page just above the closing html tag. This is one good reason to use jQuery.

问题可能在代码被执行的地方。如果您在执行JavaScript的文档的头部，即使您的web页面中有id=“u”的元素，那么在DOM完成加载之前，代码就会被执行，所以HTML还没有真正存在……您可以通过将代码移动到页面末尾的html标记之上来解决这个问题。这是使用jQuery的一个好理由。

#3

I knew that i am too late for this answer, but i hope this will help to other who are facing and who will face.

我知道我已经来不及回答这个问题了，但我希望这能帮助其他正面临和将要面对的人。

As you have written h_url is global var like var = h_url; so you can use that variable anywhere in your file.

正如你所写的h_url是全局变量var = h_url;你可以在文件的任何地方使用这个变量。

h_url=document.getElementById("u").value; Here h_url contain value of your search box text value whatever user has typed.

h_url = . getelementbyid(“u”)value;这里h_url包含您的搜索框文本值的值，无论用户键入什么。
document.getElementById("u"); This is the identifier of your form field with some specific ID.

. getelementbyid(“u”);这是表单字段的标识符，带有一些特定的ID。
Your Search Field without id

没有id的搜索字段。

<input type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />

。
Alter Search Field with id

用id改变搜索字段。

<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />

<输入id="u" ="text" class="searchbox1" name="search" placeholder=" search for Brand, Store or an Item…" value="text" />。
When you click on submit that will try to fetch value from document.getElementById("u").value; which is syntactically right but you haven't define id so that will return null.

当您单击submit时，将尝试从document.getElementById(“u”)中获取值;这在语法上是正确的，但是你没有定义id，所以它会返回空值。
So, Just make sure while you use form fields first define that ID and do other task letter.

所以，请确保在使用表单字段时首先定义ID并执行其他任务字母。

I hope this helps you and never get Cannot set property 'value' of null Error.

我希望这能帮助您，并且永远不会对null错误设置属性值。

#4

The problem is that you haven't got any element with the id u so that you are calling something that doesn't exist.
To fix that you have to add an id to the element.

问题是，您没有带id u的任何元素，因此您调用的是不存在的东西。要解决这个问题，必须向元素添加一个id。

<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />

And I've seen too you have added a value for the input, so it means the input is not empty and it will contain text. As result placeholder won't be displayed.

我也看到了你为输入添加了一个值，这意味着输入不是空的，它将包含文本。因为结果占位符不会显示。

Finally there is a warning that W3Validator will say because of the "/" in the end. :

最后，有一个警告，W3Validator会因为“/”结尾而说。:

For the current document, the validator interprets strings like according to legacy rules that break the expectations of most authors and thus cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid the messages, simply remove the "/" character in such contexts. NB: If you expect <FOO /> to be interpreted as an XML-compatible "self-closing" tag, then you need to use XHTML or HTML5.

对于当前文档，validator会根据遗留规则解释字符串，这些规则破坏了大多数作者的期望，从而导致验证器的警告和错误消息。这种解释是由HTML 4文档或其他基于sgml的HTML文档触发的。为了避免消息，只需在这种上下文中删除“/”字符。NB:如果您期望被解释为兼容xml的“自闭”标记，那么您需要使用XHTML或HTML5。

In conclusion it says you have to remove the slash. Simply write this:

总之，它说你必须去掉斜杠。简单地写这个:

<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item...">

#5

It seems to be this function

它似乎是这个函数。

h_url=document.getElementById("u").value;

You can help yourself using some 'console.log' to see what object is Null.

你可以使用一些控制台。查看什么对象是空的。

#6

h_url=document.getElementById("u") is null here

h_url = . getelementbyid(“u”)是零

There is no element exist with id as u

id作为u是不存在的。

#7

In case anyone landed on this page for a similar issue, I found that this error can happen if your JavaScript is running in the HEAD before your form is ready. Moving your JavaScript to the bottom of the page fixed it for my situation.

如果有人在这个页面上找到类似的问题，我发现如果您的JavaScript在您的表单准备就绪之前运行在头部，那么这个错误就会发生。把你的JavaScript移到页面底部，把它固定在我的位置上。

#1