Hướng dẫn cannot set properties of null setting innerhtml vuejs - không thể đặt thuộc tính của null setting innerhtml vuejs

Tôi có hai thành phần để chỉnh sửa các đối tượng JSON. Và tôi có một nút chuyển đổi giữa hai người này. Đây là mã HTML:

Switch config
Switch between editor/plain-text
Switch Editor

  

    

      
    
    

      
    
  

// Mã JavaScript

switchEditButtonClicked: function(){

  this.showTextEditor = !this.showTextEditor;
  this.showJsonEditor = !this.showJsonEditor;

  if (this.showTextEditor) {

    this.editedConfig = JSON.stringify({"hello":"test"}, undefined, 4);

    document.getElementById('myTextArea').innerHTML = this.editedConfig;

  }
  else{
    //this.editedConfig = JSON.parse(this.edite)
  }

},

Giá trị bắt đầu cho showJsonEditor = true,

switchEditButtonClicked: function(){

  this.showTextEditor = !this.showTextEditor;
  this.showJsonEditor = !this.showJsonEditor;

  if (this.showTextEditor) {

    this.editedConfig = JSON.stringify({"hello":"test"}, undefined, 4);

    document.getElementById('myTextArea').innerHTML = this.editedConfig;

  }
  else{
    //this.editedConfig = JSON.parse(this.edite)
  }

},

Không thể đặt thuộc tính 'Intern

Tôi đã thử đặt mã như bên dưới

window.onload = function() {
    // all of your code goes in here
    // it runs after the DOM is built
}

Không có lỗi được hiển thị nhưng cũng không có văn bản được hiển thị.

Trường hợp kiểm tra

Tôi đã nhận xét hai dòng này từ

switchEditButtonClicked: function(){

  this.showTextEditor = !this.showTextEditor;
  this.showJsonEditor = !this.showJsonEditor;

  if (this.showTextEditor) {

    this.editedConfig = JSON.stringify({"hello":"test"}, undefined, 4);

    document.getElementById('myTextArea').innerHTML = this.editedConfig;

  }
  else{
    //this.editedConfig = JSON.parse(this.edite)
  }

},

//this.showTextEditor = !this.showTextEditor;
//this.showJsonEditor = !this.showJsonEditor;

và đảo ngược các giá trị bắt đầu boolean cho

switchEditButtonClicked: function(){

  this.showTextEditor = !this.showTextEditor;
  this.showJsonEditor = !this.showJsonEditor;

  if (this.showTextEditor) {

    this.editedConfig = JSON.stringify({"hello":"test"}, undefined, 4);

    document.getElementById('myTextArea').innerHTML = this.editedConfig;

  }
  else{
    //this.editedConfig = JSON.parse(this.edite)
  }

},

switchEditButtonClicked: function(){

  this.showTextEditor = !this.showTextEditor;
  this.showJsonEditor = !this.showJsonEditor;

  if (this.showTextEditor) {

    this.editedConfig = JSON.stringify({"hello":"test"}, undefined, 4);

    document.getElementById('myTextArea').innerHTML = this.editedConfig;

  }
  else{
    //this.editedConfig = JSON.parse(this.edite)
  }

},

Kết quả

Văn bản được hiển thị trong Texteditor không có lỗi ..

Sự kết luận

Tôi có cảm giác rằng nó có liên quan đến

switchEditButtonClicked: function(){

  this.showTextEditor = !this.showTextEditor;
  this.showJsonEditor = !this.showJsonEditor;

  if (this.showTextEditor) {

    this.editedConfig = JSON.stringify({"hello":"test"}, undefined, 4);

    document.getElementById('myTextArea').innerHTML = this.editedConfig;

  }
  else{
    //this.editedConfig = JSON.parse(this.edite)
  }

},

Loại không thể bỏ qua không thể đặt thuộc tính 'innerhtml' của null

Trong JavaScript, một lỗi chưa được thực hiện là một loại lỗi không bị bắt trong một câu lệnh bắt.

Trong khi làm việc với JavaScript, bạn có thể gặp phải một kiểu mẫu không thể không có thể đặt thuộc tính 'InternalHtml' của lỗi null. Điều này thường xảy ra khi mã JavaScript của bạn không đặt thuộc tính bên trong thành giá trị null.JavaScript code fails to set the innerHTML property to a null value.

Điều này có thể được sửa bằng cách chạy mã JavaScript đúng cách sau khi toàn bộ trang được tải.

Trong một số trường hợp, việc đặt các phần tử HTML đúng với mã JS sẽ sửa lỗi.

Chúng ta hãy xem xét một số ví dụ về lỗi này để hiểu nó tốt hơn.

Ví dụ về kiểu mẫu không thể đặt không thể đặt thuộc tính 'Intern

Thí dụ ::

Output::

Uncaught TypeError cannot set property 'innerhtml' of null.

Lỗi này xảy ra khi mã JS cố gắng đặt thuộc tính bên trong của div thành Nhưng div với & nbsp; xin chào & nbsp; id & nbsp; được định vị sau & nbsp; mã js. Vì vậy, mã JS tải trước DIV và div & nbsp; tải cùng với trang web. Vì vậy, mã không thể tìm thấy thuộc tính DIV DIV bên trong. hello id is positioned after the JS code. So, the JS code loads before the div, and the div loads along with the webpage. So, the code is unable to find the div’s innerHTML property.

Có 3 giải pháp khả thi cho vấn đề này

1. Đặt Div trước kịch bản JS.
2. Thực hiện tập lệnh sau khi tải trang bằng Window.onload & nbsp; & nbsp; function.
3. Sử dụng hàm Sẵn sàng () trên bao gồm thư viện jQuery.

Giải pháp 1: Đặt Div trước tập lệnh JS

Giải thích mã:

Trong giải pháp trên, chúng tôi đã đặt thẻ tập lệnh bên dưới thân div. & nbsp; khi chúng tôi đặt mã JS bên dưới thân div. Sau đó, mã JS tải sau DIV và do đó không có lỗi.

Lưu ý: Đây không phải là một cách tiếp cận lập trình tốt để đặt thẻ tập lệnh bên trong thẻ cơ thể.

Giải pháp 2: & nbsp; Thực hiện tập lệnh sau khi tải trang bằng Window.Onload & nbsp;

Giải thích mã:

Trong giải pháp trên, chúng tôi đã đặt thẻ tập lệnh bên dưới thân div. & nbsp; khi chúng tôi đặt mã JS bên dưới thân div. Sau đó, mã JS tải sau DIV và do đó không có lỗi.window.onload function. This function is used to execute the script after the web page has been fully loaded. In this case, we want our function ‘whatis’ to be executed after our page has been loaded so we used the window.onloadfunction to do so.
And thus no error is encountered. 

Giải pháp 3: Sử dụng hàm Sẵn sàng () trên thư viện jQuery.

Example:

Giải thích mã:

Trong mã trên, chúng tôi đã bao gồm thư viện jQuery bằng thẻ tập lệnh. Thư viện này được bao gồm để sử dụng phương thức Sẵn sàng (). Phương thức Sẵn sàng () được sử dụng để cung cấp chức năng sau khi tài liệu đã được tải. jQuery library using the script tag. This library is included to use the ready() method. ready() method is use to make the function available after the document has been loaded.

Trong trường hợp này, Phương thức Sẵn sàng () thực thi hàm của chúng tôi ‘whatis (), sau khi trang web được tải đầy đủ. & Nbsp; & nbsp;ready() method executes our function ‘whatis()’ after the webpage is fully loaded.  

INNERHTML có thể là null không?

Không thể đặt các thuộc tính của null?

InsideHtml là gì?