Author: John Au-Yeung

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.

Sometimes, we want to randomize slides in reveal.js.

In this article, we’ll look at how to randomize slides in reveal.js.

Randomize Slides in Reveal.js

To randomize slides in reveal.js, we call Reveal.initialize with an object that has the shuffle property set to true.

For instance, we write:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/reveal.min.css" integrity="sha512-V5fKCVKOFy36w8zJmLzPH5R6zU6KvuHOvxfMRczx2ZeqTjKRGSBO9yiZjCKEJS3n6EmENwrH/xvSwXqxje+VVA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/js/reveal.min.js" integrity="sha512-QYXU3Cojl94ZRiZRjUZpyg1odj9mKTON9MsTMzGNx/L3JqvMA3BQNraZwsZ83UeisO+QMVfFa83SyuYYJzR9hw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="reveal">
  <div class="slides">
    <section>Slide 1</section>
    <section>Slide 2</section>
  </div>
</div>

to add the link tag for the Reveal.js CSS file and the script tag to include the Reveal.js script file.

Then we add the slides in the div by setting the class of the slides container to reveal and the div for the slides to slides.

Finally, we write:

Reveal.initialize({ shuffle: true });

to initialize the slides with them shuffled.

Now when we load the page, we may see the slides in different order each time.

Conclusion

To randomize slides in reveal.js, we call Reveal.initialize with an object that has the shuffle property set to true.

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

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

Fix the ‘TypeError: "x" is not a function’ When Developing JavaScript Apps

To fix the ‘TypeError: "x" is not a function’ when we’re developing JavaScript apps, we should make sure the value that we’re calling is a function.

For instance, we shouldn’t call methods on an object that doesn’t have the method:

let obj = {a: 1, b: 3, c: 4};

obj.map((num) => {
  return num * 2;
});

obj is an object, so it doesn’t have the map method unless we added one into the object.

Since we didn’t have that, the error will be thrown.

Instead, we call map on an array, which has the map method:

let numbers = [1, 4, 9];

numbers.map((num) => {
  return num * 2;
});

We should also look out for typos in our code to prevent this error.

Also, we should make sure a method doesn’t share a name with a pre-existing property.

For instance, instead of writing:

const Dog = function () {
 this.age = 11;
 this.color = "black";
 this.name = "Jane";
 return this;
}

Dog.prototype.name = function(name) {
 this.name = name;
 return this;
}

const myNewDog = new Dog();
myNewDog.name("Cassidy");

which will thrown this error since name is a pre-existing property and it’s not a function, we write:

const Dog = function () {
 this.age = 11;
 this.color = "black";
 this.dogName = "Jane";
 return this;
}

Dog.prototype.name = function(name) {
 this.dogName = name;
 return this;
}

const myNewDog = new Dog();
myNewDog.name("Cassidy");

If we have an arithmetic expression where we multiply something with an expression with parentheses, we should make sure we have the * operator.

So instead of writing:

const sixteen = 2(3 + 5);

which will throw the error since 2 isn’t a function, we write:

const sixteen = 2 * (3 + 5);

which does the multiplication like we expected.

Conclusion

To fix the ‘TypeError: "x" is not a function’ when we’re developing JavaScript apps, we should make sure the value that we’re calling is a function.

We should also look out for typos in our code to prevent this error.

Also, we should make sure a method doesn’t share a name with a pre-existing property.

If we have an arithmetic expression where we multiply something with an expression with parentheses, we should make sure we have the * operator.

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

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

Fix the ‘TypeError: "x" is not a constructor’ When Developing JavaScript Apps

To fix the ‘TypeError: "x" is not a constructor’ when we’re developing JavaScript apps, we should make sure we’re using the new operator on a constructor function or class.

Similar errors we may see include:

TypeError: Math is not a constructor
TypeError: JSON is not a constructor
TypeError: Symbol is not a constructor
TypeError: Reflect is not a constructor
TypeError: Intl is not a constructor
TypeError: Atomics is not a constructor

For instance, the following code will throw this error:

const Car = 1;
new Car();

new Math();

new Symbol();

function* f() {};
const obj = new f;

In the first example, Car is a number, so we can’t use the new operator on it to create a new Car instance.

Likewise, Math and Symbol aren’t constructors or classes, so we can’t use the new operator on them.

In the last example, f is a generator function, which isn’t the same as a constructor function or class, so we can’t use new on it to create a new f instance.

To make Car a constructor, we write:

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

We can also write:

class Car {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }
}

They’re equivalent.

constructor takes arguments for the constructor function like the constructor function does.

Then we assign the values to instance variables inside the constructor or class.

Conclusion

To fix the ‘TypeError: "x" is not a constructor’ when we’re developing JavaScript apps, we should make sure we’re using the new operator on a constructor function or class.