Category: JavaScript

Sometimes, we may run into the ‘TypeError: "x" is read-only’ when we’re developing JavaScript apps.

In this article, we’ll look at how to fix the ‘TypeError: "x" is read-only’ when we’re developing JavaScript apps.

Fix the ‘TypeError: "x" is read-only’ When Developing JavaScript Apps

To fix the ‘TypeError: "x" is read-only’ when we’re developing JavaScript apps, we should make sure that we aren’t trying to assign a value to a property that’s read-only.

On Edge, the error message for this error is TypeError: Assignment to read-only properties is not allowed in strict mode.

On Firefox, the error message for this error is TypeError: "x" is read-only.

And on Chrome, the error message for this error is TypeError: Cannot assign to read only property 'x' of #<Object> for objects and TypeError: Cannot assign to read only property '0' of [object Array] for arrays.

For instance, we shouldn’t write code like:

'use strict';
const obj = Object.freeze({name: 'Elsa', score: 157});
obj.score = 0;  

'use strict';
Object.defineProperty(this, 'COUNT', {value: 2, writable: false});
COUNT = 3;

'use strict';
const frozenArray = Object.freeze([0, 1, 2]);
frozenArray[0]++;

In the first example, we called Object.freeze on the object to make the object read-only, so we can’t assign new values to any top-level properties in it.

In the 2nd exanmple, we make COUNT instance property read-only by setting writable to `false, so we can’t assign a new value to it.

And in the 3rd example, we call Object.freeze on the array to make it read-only, so we can’t change any value in it.

We’ll also get this error if we try to assign a value to read-only properties.

For instance, if we write:

'use strict';
Math.PI = 4;

then we’ll get this error.

To fix this, we write:

'use strict';
const obj = Object.freeze({name: 'Score', points: 157});
obj = {name: obj.name, points: 0};

'use strict';
let COUNT = 2;
COUNT = 3;

In the first example, we can replace the obj variable with a new object to avoid this error.

And in the 2nd example, we can set COUNT to a new value since we used let to declare the variable.

Conclusion

To fix the ‘TypeError: "x" is read-only’ when we’re developing JavaScript apps, we should make sure that we aren’t trying to assign a value to a property that’s read-only.

On Edge, the error message for this error is TypeError: Assignment to read-only properties is not allowed in strict mode.

On Firefox, the error message for this error is TypeError: "x" is read-only.

And on Chrome, the error message for this error is TypeError: Cannot assign to read only property 'x' of #<Object> for objects and TypeError: Cannot assign to read only property '0' of [object Array] for arrays.

Sometimes, we may run into the ‘TypeError: "x" is not a non-null object’ when we’re developing JavaScript apps.

In this article, we’ll look at how to fix the ‘TypeError: "x" is not a non-null object’ when we’re developing JavaScript apps.

Fix the ‘TypeError: "x" is not a non-null object’ When Developing JavaScript Apps

To fix the ‘TypeError: "x" is not a non-null object’ when we’re developing JavaScript apps, we should make sure that we’re calling Object.create, Object.defineProperty and Object.defineProperties with objects that aren’t null.

Also, if we’re using weak maps or weak sets, we should make sure the key we add is an object.

On Edge, the error message for this error is TypeError: Invalid descriptor for property {x}.

On Firefox, the error message for this error is TypeError: "x" is not a non-null object.

And on Chrome, the error message for this error is TypeError: Property description must be an object: "x" and TypeError: Invalid value used in weak set.

For instance, the following code will throw the error:

Object.defineProperty({}, 'key', 1);
Object.defineProperty({}, 'key', null);

On the first line, 1 isn’t a non-null object. In the 2nd line, null isn’t a non-null object.

Instead, we write:

Object.defineProperty({}, 'key', { value: 'foo', writable: false });

to add a property key to the empty object with value 'foo' and make it read-only with writable set to false.

Also, if we’re using weak maps or weak sets, we should make sure the key we add is an object.

For instance, we’ll get the error if we write:

const ws = new WeakSet();
ws.add('foo');

since 'foo' isn’t a non-null object.

Instead, we write:

ws.add({foo: 'bar'});

to add an object into the set.

Conclusion

To fix the ‘TypeError: "x" is not a non-null object’ when we’re developing JavaScript apps, we should make sure that we’re calling Object.create, Object.defineProperty and Object.defineProperties with objects that aren’t null.

Also, if we’re using weak maps or weak sets, we should make sure the key we add is an object.

On Edge, the error message for this error is TypeError: Invalid descriptor for property {x}.

On Firefox, the error message for this error is TypeError: "x" is not a non-null object.

And on Chrome, the error message for this error is TypeError: Property description must be an object: "x" and TypeError: Invalid value used in weak set.

Sometimes, we want to iterate through all attributes in an HTML element with JavaScript.

In this article, we’ll look at how to iterate through all attributes in an HTML element with JavaScript.

Iterate Through All Attributes in an HTML Element with JavaScript

To iterate through all attributes in an HTML element with JavaScript, we can loop through the attributes property of the element with the for-of loop.

For instance, if we have the following element:

<div style='width: 100px' class='foo' id='bar'>

</div>

Then we can loop through the attribute values of it by writing:

const elem = document.querySelector('div')
for (const a of elem.attributes) {
  console.log(a.name, a.value);
}

We select the div with:

const elem = document.querySelector('div')

Then we use the for-of loop with the elem.attributes value.

We get the name property to get attributer name, and the value property returns the attribute value.

So we get:

'style' 'width: 100px'
'class' 'foo'
'id' 'bar'

from the console log.

Conclusion

To iterate through all attributes in an HTML element with JavaScript, we can loop through the attributes property of the element with the for-of loop.

Sometimes, we want to get the current location of an iframe with JavaScript.

In this article, we look at how to get the current location of an iframe with JavaScript.

Get the Current Location of an iframe with JavaScript

To get the current location of an iframe with JavaScript, we can use the src property of the select element object to get the location of the iframe selected.

For instance, if we have the following iframe:

<iframe src='https://google.com'>

</iframe>

Then we write:

console.log(document.querySelector("iframe").src)

to log the value of the src property of the iframe.

We select the iframe with document.querySelector("iframe").

Therefore, from the console log, we should see that the value is 'https://google.com/'.

Conclusion

To get the current location of an iframe with JavaScript, we can use the src property of the select element object to get the location of the iframe selected.

Sometimes, we want to negate code in an “if” statement block in JavaScript and jQuery.

In this article, we look at how to negate code in an “if” statement block in JavaScript and jQuery.

Negate Code in an “if” Statement Block in JavaScript and jQuery

To negate code in an “if” statement block in JavaScript and jQuery, we can use the logical NOT operator.

For instance, if we want to check if the parent element’s sibling isn’t a ul element with jQuery, we write:

if (!$(this).parent().next().is('ul')){
  //...
}

This is the opposite of:

if ($(this).parent().next().is('ul')){
  //...
}

which checks if the parent element’s sibling is a ul element.

Conclusion

To negate code in an “if” statement block in JavaScript and jQuery, we can use the logical NOT operator.