Html 未捕获的类型错误:无法将属性“值”设置为 null

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16100543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 07:40:28  来源:igfitidea点击:

Uncaught TypeError: Cannot set property 'value' of null

javascripthtml

提问by user2218532

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 文件时,我收到了错误“未捕获的类型错误:无法设置 null 的属性‘值’”。

Here is the HTMLcode:

这是 HTML 代码:

<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.

请帮我解决这个问题。

回答by Deepu

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

您没有带有 id 的元素u。这就是发生错误的原因。请注意,全局变量document.getElementById("u").value意味着您正在尝试使用名称获取输入元素的值,但u它未在您的代码中定义。

回答by MJMacarty

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 的文档的头部,即使您的网页中有一个 id="u" 的元素,代码也会在 DOM 完成加载之前执行,因此 HTML 还没有真正存在。 .. 您可以通过将代码移动到页面末尾关闭 html 标记上方来解决此问题。这是使用 jQuery 的一个很好的理由。

回答by Ivan Town

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 在表单准备就绪之前在 HEAD 中运行,则可能会发生此错误。将您的 JavaScript 移到页面底部,针对我的情况进行了修复。

回答by jondiaz

The problem is that you haven't got any element with the id uso 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 placeholderwon't be displayed.


我也看到你为输入添加了一个值,所以这意味着输入不为空,它将包含text。结果placeholder不会显示。

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 expectationsof most authors and thus cause confusingwarnings 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 "/" characterin such contexts. NB: If you expect <FOO />to be interpreted as an XML-compatible"self-closing" tag, then you need to use XHTMLor HTML5.

对于当前文档,验证器像根据传统规则一样解释字符串,这违背了大多数作者的期望,从而导致验证器发出令人困惑的警告和错误消息。这种解释是由 HTML 4 文档或其他基于 SGML 的 HTML 文档触发的。为避免这些消息,只需删除此类上下文中的“/”字符。注意:如果您希望<FOO />被解释为与XML 兼容的“自关闭”标签,那么您需要使用XHTMLHTML5

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...">

回答by Chintan Khetiya

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.

  • document.getElementById("u"); This is the identifier of your form field with some specific ID.

  • Your Search Field without id

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

  • Alter Search Field with id

    <input id="u" type="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.

  • So, Just make sure while you use form fields first define that ID and do other task letter.

  • h_url=document.getElementById("u").value;这里 h_url 包含您的搜索框文本值的值,无论用户输入什么。

  • document.getElementById("u"); 这是您的表单字段的标识符,带有一些特定的ID.

  • 您的搜索字段没有 id

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

  • 更改搜索字段 id

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

  • 当您单击提交时,它将尝试从中获取document.getElementById("u").value;语法正确的值,但您尚未定义 id 以便返回null.

  • 因此,请确保在使用表单域时首先定义该 ID 并执行其他任务。

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

我希望这对您有所帮助,并且永远不会Cannot set property 'value' of null出错。

回答by vinoth kumar

guys This error because of Element Id not Visible from js Try to inspect element from UI and paste it on javascript file:

伙计们这个错误是因为元素 Id 在 js 中不可见尝试从 UI 检查元素并将其粘贴到 javascript 文件中:

before :

前 :

document.getElementById('form:salesoverviewform:ticketstatusid').value =topping;

After :

后 :

document.getElementById('form:salesoverviewform:j_idt190:ticketstatusid').value =topping;

Credits to Divya Akka .... :)

归功于 Divya Akka .... :)

回答by pierallard

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.

您可以使用一些“console.log”来帮助自己查看哪些对象为 Null。

回答by PSR

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

h_url=document.getElementById("u")此处为空

There is no element exist with id as u

不存在id为的元素 u