Javascript 未捕获类型错误：无法设置属性'；innerHTML'；空打字机JS代码的实现

我们使用下面的代码作为文本的打字机效果。它以前工作得很好，将“_CONTENT”变量中设置的文本显示为文本，然后删除并键入下一行，但现在我们在控制台中得到“Uncaught TypeError:无法将属性'innerHTML'设置为null”，并且没有显示任何文本

有没有办法解决这个问题

<script>

// List of sentences
var _CONTENT = [ 
    "Domain Name", 
    "Website Hosting Plan", 
    "Virtual Private Server", 
    "WordPress Hosting Plan",
    "Web Design Package", 
    "Reseller Hosting Plan"
];

// Current sentence being processed
var _PART = 0;

// Character number of the current sentence being processed 
var _PART_INDEX = 0;

// Holds the handle returned from setInterval
var _INTERVAL_VAL;

// Element that holds the text
var _ELEMENT = document.querySelector("#text");

// Cursor element 
var _CURSOR = document.querySelector("#cursor");

// Implements typing effect
function Type() { 
    // Get substring with 1 characater added
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX + 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX++;

    // If full sentence has been displayed then start to delete the sentence after some time
    if(text === _CONTENT[_PART]) {

        clearInterval(_INTERVAL_VAL);
        setTimeout(function() {
            _INTERVAL_VAL = setInterval(Delete, 50);
        }, 2000);
    }
}

// Implements deleting effect
function Delete() {
    // Get substring with 1 characater deleted
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX--;


    // If sentence has been deleted then start to display the next sentence
    if(text === '') {
        clearInterval(_INTERVAL_VAL);

        // If current sentence was last then display the first one, else move to the next
        if(_PART == (_CONTENT.length - 1))
            _PART = 0;
        else
            _PART++;
        
        _PART_INDEX = 0;

        // Start to display the next sentence after some time
        setTimeout(function() {
            _CURSOR.style.display = 'inline-block';
            _INTERVAL_VAL = setInterval(Type, 100);
        }, 200);
    }
}

// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);
</script>

<div id="container">
<div id="text"></div><div id="cursor"></div>
</div>

//句子表
var_CONTENT=[
“域名”，
“网站托管计划”，
“虚拟专用服务器”，
“WordPress托管计划”，
“网页设计包”，
“经销商托管计划”
];
//正在处理的当前句子
var _部分=0；
//正在处理的当前句子的字符号
var _部分指数=0；
//保存从setInterval返回的句柄
var _间期_VAL；
//保存文本的元素
var#u元素=document.querySelector（“#text”）；
//光标元素
var#u CURSOR=document.querySelector（“CURSOR”）；
//实现键入效果
函数类型（）{
//获取添加了1个字符的子字符串
var text=\u CONTENT[\u PART]。子字符串（0，\u PART\u INDEX+1）；
_ELEMENT.innerHTML=文本；
_PART_INDEX++；
//如果已显示完整的句子，则在一段时间后开始删除该句子
如果（文本====内容[\u部分]）{
clearInterval（_INTERVAL_VAL）；
setTimeout（函数（）{
_间隔=设置间隔（删除，50）；
}, 2000);
}
}
//实现删除效果
函数Delete（）{
//获取删除了1个字符的子字符串
var text=\u CONTENT[\u PART]。子字符串（0，\u PART\u INDEX-1）；
_ELEMENT.innerHTML=文本；
_第_部分索引--；
//如果句子已被删除，则开始显示下一个句子
如果（文本==''）{
clearInterval（_INTERVAL_VAL）；
//如果当前句子是最后一句，则显示第一句，否则移动到下一句
如果（_PART==（_CONTENT.length-1））
_部分=0；
其他的
_部分++；
_部分指数=0；
//一段时间后开始显示下一句话
setTimeout（函数（）{
_CURSOR.style.display='inline block'；
_间隔=设置间隔（类型，100）；
}, 200);
}
}
//在加载时启动键入效果
_间隔=设置间隔（类型，100）；

---

谢谢。

在文档之间添加代码。addEventListener（'DOMContentLoaded'，function（）{}）用于在页面加载后执行javascript代码

document.addEventListener（'DOMContentLoaded'，function（）{
//句子表
var_CONTENT=[
“域名”，
“网站托管计划”，
“虚拟专用服务器”，
“WordPress托管计划”，
“网页设计包”，
“经销商托管计划”
];
//正在处理的当前句子
var _部分=0；
//正在处理的当前句子的字符号
var _部分指数=0；
//保存从setInterval返回的句柄
var _间期_VAL；
//保存文本的元素
var#u元素=document.querySelector（“#text”）；
//光标元素
var#u CURSOR=document.querySelector（“CURSOR”）；
//实现键入效果
函数类型（）{
//获取添加了1个字符的子字符串
var text=\u CONTENT[\u PART]。子字符串（0，\u PART\u INDEX+1）；
_ELEMENT.innerHTML=文本；
_PART_INDEX++；
//如果已显示完整的句子，则在一段时间后开始删除该句子
如果（文本====内容[\u部分]）{
clearInterval（_INTERVAL_VAL）；
setTimeout（函数（）{
_间隔=设置间隔（删除，50）；
}, 2000);
}
}
//实现删除效果
函数Delete（）{
//获取删除了1个字符的子字符串
var text=\u CONTENT[\u PART]。子字符串（0，\u PART\u INDEX-1）；
_ELEMENT.innerHTML=文本；
_第_部分索引--；
//如果句子已被删除，则开始显示下一个句子
如果（文本==''）{
clearInterval（_INTERVAL_VAL）；
//如果当前句子是最后一句，则显示第一句，否则移动到下一句
如果（_PART==（_CONTENT.length-1））
_部分=0；
其他的
_部分++；
_部分指数=0；
//一段时间后开始显示下一句话
setTimeout（函数（）{
_CURSOR.style.display='inline block'；
_间隔=设置间隔（类型，100）；
}, 200);
}
}
//在加载时启动键入效果
_间隔=设置间隔（类型，100）；
})

---

在文档之间添加代码。addEventListener（'DOMContentLoaded'，function（）{}）用于在页面加载后执行javascript代码

document.addEventListener（'DOMContentLoaded'，function（）{
//句子表
var_CONTENT=[
“域名”，
“网站托管计划”，
“虚拟专用服务器”，
“WordPress托管计划”，
“网页设计包”，
“经销商托管计划”
];
//正在处理的当前句子
var _部分=0；
//正在处理的当前句子的字符号
var _部分指数=0；
//保存从setInterval返回的句柄
var _间期_VAL；
//保存文本的元素
var#u元素=document.querySelector（“#text”）；
//光标元素
var#u CURSOR=document.querySelector（“CURSOR”）；
//实现键入效果
函数类型（）{
//获取添加了1个字符的子字符串
var text=\u CONTENT[\u PART]。子字符串（0，\u PART\u INDEX+1）；
_ELEMENT.innerHTML=文本；
_PART_INDEX++；
//如果已显示完整的句子，则在一段时间后开始删除该句子
如果（文本====内容[\u部分]）{
clearInterval（_INTERVAL_VAL）；
setTimeout（函数（）{
_间隔=设置间隔（删除，50）；
}, 2000);
}
}
//实现删除效果
函数Delete（）{
//获取删除了1个字符的子字符串
var text=\u CONTENT[\u PART]。子字符串（0，\u PART\u INDEX-1）；
_ELEMENT.innerHTML=文本；
_第_部分索引--；
//如果这个句子是正确的
<script>
  // List of sentences
  var _CONTENT = [
    "Domain Name",
    "Website Hosting Plan",
    "Virtual Private Server",
    "WordPress Hosting Plan",
    "Web Design Package",
    "Reseller Hosting Plan",
  ];

  // Current sentence being processed
  var _PART = 0;

  // Character number of the current sentence being processed
  var _PART_INDEX = 0;

  // Holds the handle returned from setInterval
  var _INTERVAL_VAL;

  // Implements typing effect
  function Type() {
    // Element that holds the text
    var _ELEMENT = document.getElementById("text");

    // Get substring with 1 characater added
    var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX++;

    // If full sentence has been displayed then start to delete the sentence after some time
    if (text === _CONTENT[_PART]) {
      clearInterval(_INTERVAL_VAL);
      setTimeout(function () {
        _INTERVAL_VAL = setInterval(Delete, 50);
      }, 2000);
    }
  }

  // Implements deleting effect
  function Delete() {
    // Element that holds the text
    var _ELEMENT = document.getElementById("text");
    // Cursor element
    var _CURSOR = document.getElementById("cursor");

    // Get substring with 1 characater deleted
    var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX--;

    // If sentence has been deleted then start to display the next sentence
    if (text === "") {
      clearInterval(_INTERVAL_VAL);

      // If current sentence was last then display the first one, else move to the next
      if (_PART == _CONTENT.length - 1) _PART = 0;
      else _PART++;

      _PART_INDEX = 0;

      // Start to display the next sentence after some time
      setTimeout(function () {
        _CURSOR.style.display = "inline-block";
        _INTERVAL_VAL = setInterval(Type, 100);
      }, 200);
    }
  }

  // Start the typing effect on load
  _INTERVAL_VAL = setInterval(Type, 100);
</script>

<div id="container">
  <div id="text"></div>
  <div id="cursor"></div>
</div>