简体   繁体   English

错误“无法设置 null 的属性‘innerHTML’”

[英]Error "Cannot set property 'innerHTML' of null"

Below is the HTML code.下面是 HTML 代码。 I am trying to create editor using ace js我正在尝试使用 ace js 创建编辑器

 <!DOCTYPE html> <html lang="en"> <head> <script> window.onload = function what() { var a = document.getElementById("abc"); a.innerHTML = 'hi'; }; </script> <title>ACE in Action</title> <style type="text/css" media="screen"> #editor { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } </style> </head> <body> <div id="editor"> <span id="abc">Class </span>{ public void add(int a, int b){ int sum=a+b; } } </div> <script src="http://ajaxorg.github.io/ace-builds/src/ace.js" type="text/javascript" charset="utf-8"></script> <script src="http://ajaxorg.github.io/ace-builds/src/ext-language_tools.js"></script> <script type="text/javascript" src="ClassData.json"></script> <script> var langTools = ace.require("ace/ext/language_tools"); var editor = ace.edit("editor"); editor.setTheme("ace/theme/monokai"); editor.session.setMode("ace/mode/java"); editor.setOptions({ enableBasicAutocompletion: true // enableLiveAutocompletion: true }); var staticWordCompleter = { getCompletions: function(editor, session, pos, prefix, callback) { var wordList = ["foo", "bar", "baz", "arpit", "abhishek"]; callback(null, wordList.map(function(word) { return { caption: word, value: word, meta: "class" }; })); } } langTools.addCompleter(staticWordCompleter); </script> </body> </html>

Error:错误:

Error "Cannot set property 'innerHTML' of null".错误“无法将属性 'innerHTML' 设置为 null”。

I am trying to create an online editor using Ace JS with features like auto-import of package when any object is created and add custom name of class.我正在尝试使用 Ace JS 创建一个在线编辑器,该编辑器具有在创建任何对象时自动导入包并添加自定义类名称等功能。 For this, I added a 'p' tag next to Class so that I can insert some text in that line but it is not able to detect the id named 'abc'.为此,我在 Class 旁边添加了一个“p”标签,以便我可以在该行中插入一些文本,但它无法检测到名为“abc”的 ID。

It seems that the ACE editor you are using does not accept HTML within the textfield.您使用的 ACE 编辑器似乎不接受文本字段中的 HTML。 Opening the Developer Tools and Inspecting the content reveals that the ACE editor removed the span with id abc , that's why you get a null pointer trying to access the not existing element.打开开发人员工具并检查内容显示 ACE 编辑器删除了带有 id abcspan ,这就是为什么您在尝试访问不存在的元素时会得到一个空指针。

The beginning of the Text has been modified by the editor to look like <span class="ace_support ace_function">Class</span> when viewed in developer tools.文本的开头已被编辑器修改为在开发人员工具中查看时看起来像<span class="ace_support ace_function">Class</span>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM