天道酬勤,学无止境

`getElementById` 返回 null [重复](`getElementById` returning null [duplicate])

问题

document.getElementById返回null 。 我在 SO 中阅读了其他四个问题,并阅读了 MDN 上的参考资料,但我不知道出了什么问题; 请帮我。 代码如下:

HTML

<button id="btnButton1">Button1!</button><br>
<button id="btnButton2">Button2!</button><br>
<span id="spanOutPut"></span>

Javascript

getBYid = function(elem) {
    return document.getElementById(elem); }

funButton1 = function() { getBYid('spanOutPut').innerHTML = "Button 1 pressed!!" };
funButton2 = function() { getBYid('spanOutPut').innerHTML = "Did you press the Button 2?!" };

getBYid("btnButton1").addEventListener('click', funButton1, false);
getBYid("btnButton2").addEventListener('click', funButton2, false);

我在 FireBug 上收到TypeError: getBYid(...) is null

当我简单地从 JS 中删除对addEventListener的调用并设置onclick内联时,它就起作用了,如下面的代码所示:

<button onclick="funButton1()">Button1"</button>

有什么区别?

回答1

你必须在这些元素被加载到 DOM 之后放置它

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 为什么document.GetElementById返回null [重复](Why is document.GetElementById returning null [duplicate])
    问题 这个问题已经在这里有了答案: 为什么jQuery或诸如getElementById之类的DOM方法找不到元素? (10个答案) 6年前关闭。 我一直在成功使用document.GetElementById,但是从某些时候开始,我无法使其再次正常运行。 我使用过的旧页面仍然可以使用,但是事情很简单: <html> <head> <title>no title</title> <script type="text/javascript"> document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?"; </script> </head> <body> <div id="ThisWillBeNull"></div> </body> </html> 现在一直在给我“ document.getElementById(“ parsedOutput”)为null”。 不管我使用Firefox还是Chrome,或者启用了哪些扩展名,或者我为html使用的标头都没有关系,它始终为null,并且我找不到可能出错的地方。 感谢您的输入=) 回答1 您可以像这样使用脚本标签: <script defer> // your javascript code goes here </script> 加载所有内容后
  • Html5 画布和 javascript document.getElementById() 返回 null [重复](Html5 canvas and javascript document.getElementById() returns null [duplicate])
    问题 这个问题在这里已经有了答案: 为什么 jQuery 或诸如 getElementById 之类的 DOM 方法找不到该元素? (6 个回答) 8 年前关闭。 我正在尝试使用 html5 画布,当我这样做时 var c=document.getElementById('myCanvas'); var ctx=c.getContext('2d'); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); 这是 html <!DOCTYPE html> <html> <head> <script type="text/javascript" src="game.js"></script> </head> <body> <canvas id="myCanvas" width="512" height="480" style="border:1px solid #000000;"> </canvas> </body> </html> 我不知道出了什么问题 回答1 很有可能你的脚本在你的 DOM 准备好并且窗口已经加载之前运行,例如: window.onLoad=function(){ var c=document.getElementById('myCanvas'); var ctx=c.getContext('2d'); ctx
  • 它说TypeError:document.getElementById(…)为null [duplicate](It says that TypeError: document.getElementById(…) is null [duplicate])
    问题 这个问题已经在这里有了答案: 为什么jQuery或诸如getElementById之类的DOM方法找不到元素? (10个答案) 去年关闭。 虽然我将参数推送到getElementById,但我想知道这个“是否为null”错误是从哪里来的? TypeError: document.getElementById(...) is null [Break On This Error] document.getElementById(elmId).innerHTML = value; Line 75 除此之外,我不知道为什么除非单击这些播放列表图片之一,否则标题和时间不会显示? 回答1 所有这些结果都为null : document.getElementById('volume'); document.getElementById('bytesLoaded'); document.getElementById('startBytes'); document.getElementById('bytesTotal'); 您需要像这样在updateHTML中进行空检查: function updateHTML(elmId, value) { var elem = document.getElementById(elmId); if(typeof elem !== 'undefined' &&
  • HTML DOM中存在具有重复ID的元素时,javascript getElementById()的行为是什么?(behavior of javascript getElementById() when there are elements with duplicate IDs in HTML DOM?)
    问题 当HTML DOM中存在具有重复ID的元素时,有人可以阐明javascript getElementById()的行为吗? 回答1 如果您有多个具有相同ID的元素,则可以通过以下方式将其全部选中 document.querySelectorAll("[id='myid']") 但是,如果您可以控制它,则只需修复HTML。 回答2 尽管未定义标准行为,但通常它将返回找到的第一个元素。 演示:http://jsfiddle.net/ruNKK/ 回答3 是的,行为是不确定的。 标记无效,并且没有标准来定义浏览器在这种情况下应执行的操作。 每个浏览器都会尝试做一些合理的事情,通常返回第一个元素。 其他可能的处理方式是返回最后一个元素,根本不返回任何元素(null),或者抛出错误。 回答4 具有相同ID的多个对象是非法的。 因为不应该这样做,所以规范中未指定具有多个匹配项的getElementById()的行为。 实际上,该规范明确指出:“如果有多个具有此ID的元素,则不会定义行为。” 在我尝试过的几种浏览器中,它返回第一个,但是显然您不应该依赖于此。 如果要查找所有匹配项,则必须设计一个查询,以查看所有标签的ID并收集与您的标签匹配的ID。 在普通的javascript中,您可以这样做: function getAllElementsById(id) { var all =
  • 为什么HTML中不允许重复的ID(Why are duplicate ids not allowed in HTML)
    问题 在什么情况下HTML页面包含具有重复ID属性的元素是非法的? 作为使用HTML已有多年经验的开发人员,我知道意图是元素ID应该是唯一的-我要问的是重复ID的实际负面影响。 当然,某些库中类似于getElementByID()的函数可能返回数组而不是单个元素,并且当开发人员未预期这种情况时,这可能会导致问题。 但是,据我所知,此类功能将继续运行得如此清晰,它们并不是id重复项的破坏性影响。 那么,为什么不允许重复的ID? 编辑:问题的驱动因素是,在生成列表/重复项,生成具有重复ID的元素时,我看到了一些模板库,并且我想知道这在实际意义上会产生什么影响,以及如何决定是否采用这些库。 我还想知道模式插件或其他任何插件的效果,这些插件可能会克隆现有的隐藏节点,从而通过代码创建副本,然后浏览器在这种情况下会做什么。 回答1 规格说明唯一 HTML 4.01规范说ID必须在文档范围内是唯一的。 HTML 5规范说了同样的话,换句话说。 它说ID在它的home子树中必须是唯一的,如果我们阅读ID的定义,它基本上就是文档。 避免重复但是,由于HTML渲染器在处理HTML渲染时非常宽容,因此它们允许重复的ID。 应尽可能避免这种情况,在使用JavaScript中的ID通过编程方式访问元素时,应严格避免这种情况。 我不确定找到几个匹配的元素时应该返回什么getElementById函数? 应该是
  • 即使元素存在,getElementById()也将返回null。(getElementById() returns null even though the element exists [duplicate])
    问题 这个问题已经在这里有了答案: 为什么jQuery或诸如getElementById之类的DOM方法找不到元素? (10个答案) 7年前关闭。 我正在尝试使用getElementById()获取元素,但是即使元素存在,它也会返回null。 我究竟做错了什么? <html> <head> <title>blah</title> <script type="text/javascript"> alert(document.getElementById("abc")); </script> </head> <body> <div id="abc"> </div> </body> 回答1 您必须将其放入document load事件中。 脚本执行时DOM尚未变为abc 。 回答2 您的脚本在加载DOM之前运行。 要解决此问题,您可以将代码放置在window.onload函数中,如下所示: window.onload = function() { alert(document.getElementById("abc")); }; 一种替代方法是将script放在结束</body>标记之前。 回答3 如果您不想附加到load事件,则只需将脚本放在正文的底部,这样它将在结尾处执行- <html> <head> <title>blah</title> </head> <body> <div
  • 循环内的setTimeout [重复](setTimeout inside for loop [duplicate])
    问题 这个问题已经在这里有了答案: for循环中的setTimeout不打印连续值[重复] (10个答案) 5年前关闭。 我希望字符串显示为以下字符的字符: function initText() { var textScroller = document.getElementById('textScroller'); var text = 'Hello how are you?'; for(c = 0; c < text.length; c++) { setTimeout('textScroller.innerHTML += text[c]', 1000); } } window.onload = initText; 它不起作用..我在做什么错? 回答1 尝试这样的事情: function initText() { var textScroller = document.getElementById('textScroller'); var text = 'Hello how are you?'; var c = 0; var interval = setInterval(function() { textScroller.innerHTML += text[c]; c++; if(c >= text.length) clearInterval(interval); }
  • 使用 Jquery 返回 CSS 高度,未计算,但已声明 [重复](Return CSS Height with Jquery, Not computed, but declared [duplicate])
    问题 这个问题在这里已经有了答案: 获取设置的元素 CSS 属性(宽度/高度)值(以百分比/em/px/等为单位) (5 个回答) 8 个月前关闭。 我认为这可能是以前版本的 jquery 中的默认值,但是当我调用.css("height")和.height() ,它返回计算出的高度,这不是我想要的 - 我只想要一个如果在该元素的 CSS 文件中专门声明了高度值。 就像如果它没有在任何地方声明一样,也许它可以像 top 一样返回'auto'有时会返回 left ...... 例如,我的 CSS 如下所示: .element{ margin-left:5px; color:red; } .css("margin-left")返回"5px" ,而.css("height")返回20即使它没有特别设置...... 谢谢 回答1 浏览器会自动计算 CSS 高度和宽度。 例如,您可以在 Chrome 开发者工具 (F12) 中的“计算样式”选项卡中看到它们 和文档: jQuery.width() 获取匹配元素集中第一个元素的当前计算宽度或设置每个匹配元素的宽度。 .css(width) 和 .width() 的区别在于,后者返回一个无单位的像素值(例如,400),而前者返回一个单位完整的值(例如,400px) 但是如果你想获得正确的 CSS 值,我可以建议不要使用 jQuery 如果我们有
  • 确定数组是否包含值[重复](Determine whether an array contains a value [duplicate])
    问题 这个问题已经在这里有了答案: 如何检查数组是否在JavaScript中包含值? (54个回答) 4年前关闭。 我需要确定数组中是否存在值。 我正在使用以下功能: Array.prototype.contains = function(obj) { var i = this.length; while (i--) { if (this[i] == obj) { return true; } } return false; } 上面的函数总是返回false。 数组值和函数调用如下: arrValues = ["Sam","Great", "Sample", "High"] alert(arrValues.contains("Sam")); 回答1 var contains = function(needle) { // Per spec, the way to identify NaN is that it is not equal to itself var findNaN = needle !== needle; var indexOf; if(!findNaN && typeof Array.prototype.indexOf === 'function') { indexOf = Array.prototype.indexOf; } else { indexOf =
  • 通过属性值从对象数组中获取JavaScript对象[重复](Get JavaScript object from array of objects by value of property [duplicate])
    问题 这个问题已经在这里有了答案: 在JavaScript对象数组中按ID查找对象(35个答案) 2年前关闭。 假设我有四个对象组成的数组: var jsObjects = [ {a: 1, b: 2}, {a: 3, b: 4}, {a: 5, b: 6}, {a: 7, b: 8} ]; 有没有一种方法可以通过属性b的值获取第三个对象( {a: 5, b: 6} ),例如,没有for...in循环? 回答1 Filter对象数组,其属性与值匹配,返回数组: var result = jsObjects.filter(obj => { return obj.b === 6 }) 请参阅Array.prototype.filter()上的MDN文档 const jsObjects = [ {a: 1, b: 2}, {a: 3, b: 4}, {a: 5, b: 6}, {a: 7, b: 8} ] let result = jsObjects.filter(obj => { return obj.b === 6 }) console.log(result) Find数组中第一个元素/对象的值,否则返回undefined 。 var result = jsObjects.find(obj => { return obj.b === 6 }) 请参阅Array.prototype
  • getElementById返回null吗? [关闭](getElementById returns null? [closed])
    问题 关闭。 此问题不符合堆栈溢出准则。 它当前不接受答案。 想要改善这个问题吗? 更新问题,使它成为Stack Overflow的主题。 7年前关闭。 改善这个问题 document.getElementById('id of div that definately exists')返回null。 我最初是在最后一次加载javascript的,以确保无需担心onload事件。 我也尝试使用onload事件。 这很诡异。 任何想法或帮助将不胜感激。 回答1 原因可能是: 无效的HTML语法(某些标记未关闭或类似错误) 重复的ID-有两个具有相同ID的HTML DOM元素也许您试图通过ID获取的元素是动态创建的(由ajax加载还是由脚本创建)? 请发布您的代码。 回答2 还请注意如何执行页面上的js。 例如,如果您执行以下操作: (function(window, document, undefined){ var foo = document.getElementById("foo"); console.log(foo); })(window, document, undefined); 这将返回null,因为您将在加载文档之前对其进行调用。 更好的选择.. (function(window, document, undefined){ // code that should be
  • 错误:未被捕获的TypeError:无法将属性'innerHTML'设置为null [重复](error: Uncaught TypeError: Cannot set property 'innerHTML' of null [duplicate])
    问题 这个问题已经在这里有了答案: 'innerHTML':对象为null或未定义(1个答案) 5年前关闭。 当我尝试在chrome中运行该程序时,我不断收到错误消息“ Uncaught TypeError:无法将属性'innerHTML'设置为null”。 我现在没有做错什么,任何帮助将不胜感激。 <!DOCTYPE html> <html> <head> </head> <script> var x = "hey"; var counter = 1; var button = document.getElementById("button"); var div = document.getElementById("box"); var text = document.getElementById("text"); var sound = document.getElementById("sound"); var array=[ "thanks for clicking", "keep on clicking", "click one more time", "why do you keep on clicking me?", "stop clicking me!"]; function thing(file){ var y = array[Math.floor(Math
  • 在原生javascript中创建可拖动的div [重复](Create a draggable div in native javascript [duplicate])
    问题 这个问题已经在这里有了答案: 可移动/可拖动<div> (7个答案) 3年前关闭。 我想在本机javascript中创建可移动/可拖动的div,而无需使用jquery和库。 是否有教程或其他书籍? 回答1 好的,这是我用于轻量级部署的个人代码(由于某些原因,不允许使用库或导致使用库过高的项目)。 首先,我总是使用此便利函数,以便我可以传递id或实际的dom元素: function get (el) { if (typeof el == 'string') return document.getElementById(el); return el; } 值得一提的是, get()类型比document.getElementById()短,并且我的代码最终更短。 其次,意识到大多数库正在做的事情是跨浏览器兼容性。 如果所有浏览器的行为都相同,则该代码相当简单。 因此,让我们编写一些跨浏览器功能来获取鼠标位置: function mouseX (e) { if (e.pageX) { return e.pageX; } if (e.clientX) { return e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body
  • Ajax 之后的 Javascript [重复](Javascript after Ajax [duplicate])
    问题 这个问题在这里已经有了答案: 8 年前关闭。 可能的重复: 在 AJAX 请求之前使用 JavaScript 获取日期 我有一个这样的 Ajax 请求: function ajaxrequest(str){ var aircraft = $("#resultdiv"); aircraft.load("./other_file.php?icao="+str, function(){ }); } 如果我将 Javascript 放在 other_file.php 中,则不起作用。 我不知道为什么? 但是如果直接使用javascript代码就很好玩! 但我需要这个功能。 如何使用 Javascript 将函数更改为此结果很有趣? 例如: 如果 other_file.php 有这个: <script> function example(){ var id = document.getElementById('id').value; $("div2").text(id); } </script> 这不起作用,因为它需要获取 var id,但如果元素的值为 2365。获取它的 javascript 代码document.getElementById('id').value; 不起作用,因为 javascript 不起作用。 但是如果我直接这样做而不是通过函数 ajaxrequest
  • document.getElementById与jQuery $()(document.getElementById vs jQuery $())
    问题 这是: var contents = document.getElementById('contents'); 与此相同: var contents = $('#contents'); 鉴于jQuery已加载? 回答1 不完全是!! document.getElementById('contents'); //returns a HTML DOM Object var contents = $('#contents'); //returns a jQuery Object 在jQuery中,要获得与document.getElementById相同的结果,您可以访问jQuery Object并获取该对象中的第一个元素(请记住JavaScript对象的行为类似于关联数组)。 var contents = $('#contents')[0]; //returns a HTML DOM Object 回答2 不。 调用document.getElementById('id')将返回原始DOM对象。 调用$('#id')将返回一个jQuery对象,该对象包装DOM对象并提供jQuery方法。 因此,您只能在$()调用中调用诸如css()或animate()类的jQuery方法。 您还可以编写$(document.getElementById('id'))
  • 未被捕获的TypeError:无法将属性'onclick'设置为null [重复](Uncaught TypeError: Cannot set property 'onclick' of null [duplicate])
    问题 这个问题已经在这里有了答案: 为什么jQuery或诸如getElementById之类的DOM方法找不到元素? (6个答案) 3年前关闭。 我正在创建一个HTML页面,该页面是使用引导程序构建的。 这是最终的HTML代码和hello.js文件的代码: document.getElementById("subm").onclick = function () { alert("Hello WOrld"); } <!DOCTYPE html> <html> <head> <title>Calculator</title> <link rel="stylesheet" href="/stylesheets/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> </html> <body> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="javascripts/bootstrap.min.js"></script> <script src=
  • 检查元素上是否存在事件[重复](Check if event exists on element [duplicate])
    问题 这个问题已经在这里有了答案: jQuery查找向对象注册的事件处理程序(16个答案) 5年前关闭。 有没有一种方法可以检查jQuery中是否存在事件? 我正在使用自定义命名空间事件的插件,并且希望能够检查事件是否绑定到元素。 回答1 $('body').click(function(){ alert('test' )}) var foo = $.data( $('body').get(0), 'events' ).click // you can query $.data( object, 'events' ) and get an object back, then see what events are attached to it. $.each( foo, function(i,o) { alert(i) // guid of the event alert(o) // the function definition of the event handler }); 您可以通过将对象引用(虽然不是jQuery对象)馈送到$ .data进行检查,并为第二个参数馈送“事件”,这将返回一个填充有所有事件(例如“点击”)的对象。 您可以遍历该对象并查看事件处理程序的作用。 回答2 您可以使用: $("#foo").unbind('click'); 确保未绑定所有点击事件
  • 根据内容高度调整 iframe 高度 [重复](Resize iframe height according to content height [duplicate])
    问题 这个问题在这里已经有了答案: 根据内容调整 iframe 的大小(23 个回答) 5年前关闭。 我正在尝试根据其内容(网页)的高度和宽度调整 iframe 的大小。 我使用了在堆栈的其他答案中找到的代码。 对于新宽度的设置,似乎可行,但我无法使该高度起作用,我不知道为什么。 您可以在此处查看和编辑我的示例:http://jsfiddle.net/dzorz/pvtr3/ 这是我的 HTML: <iframe id="finance-iframe" class="finance-iframe" src="http://wordpress.org" width="100%" height="300px" marginheight="0" frameborder="0" onLoad="autoResize('finance-iframe');"></iframe> 和 javascript: function autoResize("finance-iframe"){ var newheight; var newwidth; if(document.getElementById){ newheight=document.getElementById("finance-iframe").contentWindow.document.body.scrollHeight
  • 将BufferedInputStream转换为图像[重复](Convert BufferedInputStream into image [duplicate])
    问题 这个问题已经在这里有了答案: ImageIO.read在字节数组上返回null (1个答案) 7年前关闭。 我在将Blob转换为缓冲图像时遇到麻烦,因此可以使用它。 我从使用inputstream上传的数据库中得到了一个blob(jpg图像)。 在我的数据库中,它存储为BufferedInputStream,我注意到了。 我得到的Blob很好,它有一堆怪异的符号,并说它是jpg,所以图像必须很好。 谁能发现我在做什么错? 也许我将其转换为错误? 在image = ImageIO.read(new ByteArrayInputStream(data)); 图片返回null。 @GET @Path("{id}") @Produces("image/*") public Response post(@PathParam("id") String id) throws IOException { Connection con = connection(); Blob blob = getPhoto(con); BufferedImage image = null; byte[] data = null; int blobLength = 0; try { blobLength = (int) blob.length(); data = blob.getBytes(1
  • 如果多个不同的HTML元素是不同的元素,它们可以具有相同的ID吗?(Can multiple different HTML elements have the same ID if they're different elements?)
    问题 如果多个HTML元素具有不同的元素类型,它们可以具有相同的ID吗? 这样的情况有效吗? 例如: div#foo span#foo a#foo 回答1 不。 元素ID在整个文档中应该是唯一的。 回答2 我认为某些东西应该是唯一的还是必须是唯一的(即由网络浏览器强制执行)之间存在区别。 ID应该是唯一的吗? 是的。 ID必须是唯一的吗? 不可以,至少IE和FireFox允许多个元素具有相同的ID。 回答3 多个元素可以具有相同的ID吗? 是的-无论它们是否具有相同的标记,即使多个元素具有相同的ID,浏览器也会呈现该页面。 它是有效的HTML吗? 否。从HTML 5.1规范开始,这仍然是正确的。 但是,规范还说getElementById必须返回具有给定ID的第一个元素,从而在无效文档的情况下,行为也不会不确定。 这种无效的HTML有什么后果? 大多数(如果不是全部)浏览器在调用getElementById时会选择具有给定ID的第一个元素。 一些通过ID查找元素的库将继承此行为,而较新的库(如gman在其答案中指出的那样)将使用更明确的querySelector和querySelectorAll方法,这两个方法分别明确选择了第一个或所有匹配的元素。 大多数(如果不是全部)浏览器还将id选择器(例如#myid )分配的样式应用于具有指定ID的所有元素。 如果这是您的期望和意图