Error: Uncaught TypeError - Unable to change value of 'innerHTML' for null object in VueJs

Question

Error: Uncaught TypeError - Unable to change value of 'innerHTML' for null object in VueJs

I have been encountering a similar problem to others, but despite trying the solutions provided in previous questions, I am unable to resolve it.

In my <template>:

<modal name="MyModal" >
  <span class="myClass" id="visible">visible</span>
</modal>

In my <script>:

export default {
name: "myProject",
data: function() {
 return {}
},
methods:
 Open_EditTask: function() {

  this.$modal.show("MyModal");

  this.CurrentTask = this.MyTask;

  if ( app.EditTask.visible == true ) { document.getElementById('visible').innerHTML = 'visible'; }
  else { document.getElementById('visible').innerHTML = 'hidden'; }
 }
}

I utilized the modal plugin for modal creation.

The issue arises when the modal is opened as the text does not change based on the value of app.EditTask.variable. However, when attempting to print the value, it correctly displays either true or false.

Error message:

Uncaught TypeError: Cannot set property 'innerHTML' of null

javascript vue.js vuejs2

Answer 1

Answer №1

Why do you choose not to utilize computed, when it's such a simple solution?

Code Example:

<modal name="MyModal" >
  <span class="myClass" id="visible"> {{ isVisible }} </span>
</modal>

Javascript:

export default {
  name: "myProject",
  data: function() {
    return {}
  },
  methods:{
    Open_EditTask: function() {
      ..
    }
  },
  computed: {
    isVisible(){
      return app.EditTask.visible ? 'visible' : 'hidden';
    }
  }
}

To update class name dynamically:

Code Example:

<modal name="MyModal" >
  <span :class="{myClass: true, hidden: !isVisible, visible: isVisible}" id="visible"></span>
</modal>

Javascript:

export default {
  name: "myProject",
  data: function() {
    return {}
  },
  methods:{
    Open_EditTask: function() {
      ..
    }
  },
  computed: {
    isVisible(){
      return app.EditTask.visible;
    }
  }
}

Answer 2

Why do you choose not to utilize computed, when it's such a simple solution?

Code Example:

<modal name="MyModal" >
  <span class="myClass" id="visible"> {{ isVisible }} </span>
</modal>

Javascript:

export default {
  name: "myProject",
  data: function() {
    return {}
  },
  methods:{
    Open_EditTask: function() {
      ..
    }
  },
  computed: {
    isVisible(){
      return app.EditTask.visible ? 'visible' : 'hidden';
    }
  }
}

To update class name dynamically:

Code Example:

<modal name="MyModal" >
  <span :class="{myClass: true, hidden: !isVisible, visible: isVisible}" id="visible"></span>
</modal>

Javascript:

export default {
  name: "myProject",
  data: function() {
    return {}
  },
  methods:{
    Open_EditTask: function() {
      ..
    }
  },
  computed: {
    isVisible(){
      return app.EditTask.visible;
    }
  }
}

Error: Uncaught TypeError - Unable to change value of 'innerHTML' for null object in VueJs

Answer №1

To update class name dynamically:

Similar questions

Sentry: Easily upload source maps from a nested directory structure

AngularJS: The requested resource does not have the "Access-Control-Allow-Origin" header

Transmit information from Ajax to CodeIgniter's controller

Create beautiful PDF documents using the KNP Snappy Bundle, seamlessly converting dynamically modified Twig templates

The PHP function is not successfully receiving a value from the AJAX call to be entered into the Database

Safari and iOS 15 to 14 have rendered the Javascript audio context unusable

How can I pass an array from HTML to Node.js and subsequently store it in MongoDB?

Issue with code failing to insert object into an array

When hovering over various div elements in HTML

Harnessing the power of external Javascript functions within an Angular 2 template

I am having trouble with $(this) in my jQuery click event handler

At times, the map may only be visible in the top left corner of its designated container

Vue state loses data upon page refresh causing fetched content to vanish

Submitting forms through Vanilla JavaScript using AJAX

Tips for accessing a unique window name in JavaScript

JavaScript code that involves manipulating dates within a nested loop

Tips for crafting interactive Dropdown menus

Enhancing the appearance of dropdown menus for WooCommerce Variable products with custom CSS styling

JavaScript - memory heap exhausted

Convert Ajax null value to NoneType in web2py