未捕获的类型错误：无法设置空值的属性'value'。

Question

我正在尝试使用ajax请求将输入的文本传递给控制器。但是当我尝试执行JS文件时，我遇到了错误 "Uncaught TypeError: Cannot set property 'value' of null"。

这是HTML代码：

这是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>

这是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(){
        }
    });
}

请帮我修复这个问题。

- user2218532

---

可能是重复的问题：为什么jQuery或者像getElementById这样的DOM方法找不到元素？ - Felix Kling

Answer 1

您没有使用id u 的元素，所以出现了错误。 请注意，您正在尝试获取名称为“u”的输入元素的值，但在您的代码中未定义该元素。

- Deepu

---

不是全局变量。document.getElementById("u").value 的意思是你正在尝试获取名为'u'的输入元素的值，但它在你的代码中未定义。需要注意的是，此处并非全局变量。 - Deepu

Answer 2

问题可能在代码执行的位置。如果你正在标签中执行JavaScript，即使你的网页上有一个id="u"的元素，代码也会在DOM完成加载之前执行，因此实际上还没有任何HTML存在...你可以通过将代码移动到页面底部，紧靠闭合的html标签之前来解决这个问题。这是使用jQuery的一个很好的原因。

- MJMacarty

---

一个相关的事情：这是了解基础知识的一个很好的理由，即JavaScript、DOM和HTML。框架，即使是最好的框架，也会让你一头雾水。 - mold

Answer 3

如果有人因相似问题而进入此页面，我发现如果您的JavaScript在表单准备就绪之前在头部运行，则可能会出现此错误。将JavaScript移动到页面底部可解决此问题。

- Ivan Town

---

很好的发现。但是当我将脚本移到底部时，现在没有错误了，但我仍然有已完成的字段（完全不为空）。 - WilliamK

Answer 4

问题在于您没有任何带有id u的元素，因此您正在调用不存在的内容。
为了解决这个问题，您需要向元素添加一个id。

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

我还注意到你为输入框添加了一个值，这意味着输入框不是空的，它将包含文本。因此，placeholder不会被显示。

最后，有一个警告，W3Validator会提示因为末尾的“/”而出现错误。:

对于当前文档，验证器会根据旧规则解释类似于的字符串，这违背了大多数作者的期望，因此会导致验证器产生混乱的警告和错误消息。此解释由HTML 4文档或其他基于SGML的HTML文档触发。为了避免这些消息，在这种情况下简单地删除“/”字符即可。注意：如果您希望将<FOO />解释为适用于XML的“自闭合”标签，则需要使用XHTML或HTML5。

总之，它说你必须删除斜杠。直接写成这样：

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

- jondiaz

Answer 5

在头部的脚本标签中添加defer，这样可以在DOM加载后执行你的脚本。

<script src="script.js type="text/javascript"></script>

它应该看起来像这样：

<script src="script.js type="text/javascript" defer></script>

- MRM051

Answer 6

我知道我回答晚了，但我希望这可以帮助那些正在面临或将要面临同样问题的人。

你已经写了一个全局变量h_url，例如var = h_url;，所以你可以在文件中的任何地方使用该变量。

• 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，然后再进行其他任务。

我希望这可以帮助你，永远不会出现Cannot set property 'value' of null错误。

- Chintan Khetiya

Answer 7

大家好，这个错误是由于js中元素Id不可见造成的。请尝试从UI中检查该元素并将其粘贴到javascript文件中：

修改前：

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

After :

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

Credits to Divya Akka .... :)

- vinoth kumar

Answer 8

似乎是这个函数

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

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

- pierallard

Answer 9

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

不存在id为u的元素。

- PSR

---

我已经将 h_url 声明为全局变量... 我相信问题不在于此。 - user2218532

@user2218532：我不确定你是否理解他们的意思。该错误的意思是无法将h_url属性设置为document.getElementById("u")返回的内容（即null，它没有value属性）的value，这意味着这个答案是（应该是）正确的。 - Qantas 94 Heavy

@user2218532 但是没有ID为u的元素。 - PSR

尝试将 h_url = somevalue 设置为测试目的。 - PSR

我得到了答案。我只是用getElementById替换了getElementByName。 var searchText = document.getElementById("search").value;此外，每当我输入文本时，我都按下“Enter”按钮，而不是使用onClick事件。感谢您的支持.. :) - user2218532

Answer 10

我通过为提交按钮添加了一个id，并将回调函数更改为onclick来解决了这个问题。

- James Bienaime