Category: JavaScript

Sometimes, we want to add inline style using JavaScript.

In this article, we’ll look at how to add inline style using JavaScript.

How to add inline style using JavaScript?

To add inline style using JavaScript, we set the properties in the style object property.

For instance, we write

nFilter.style.width = "330px";
nFilter.style.float = "left";

to set the width and float CSS styles of the nFilter element.

Conclusion

To add inline style using JavaScript, we set the properties in the style object property.

Sometimes, we want to dynamically invoke object method from string with JavaScript.

In this article, we’ll look at how to dynamically invoke object method from string with JavaScript.

How to dynamically invoke object method from string with JavaScript?

To dynamically invoke object method from string with JavaScript, we use square brackets.

For instance, we write

foo[method]();

to call the method method in foo.

method is a string with the method name of the method in the foo object.

Conclusion

To dynamically invoke object method from string with JavaScript, we use square brackets.

Sometimes, we want to draw polygons on an HTML5 canvas with JavaScript.

In this article, we’ll look at how to draw polygons on an HTML5 canvas with JavaScript.

How to draw polygons on an HTML5 canvas with JavaScript?

To draw polygons on an HTML5 canvas with JavaScript, we call the lineTo method.

For instance, we write

const ctx = canvas.getContext("2d");
ctx.fillStyle = "#f00";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 50);
ctx.lineTo(50, 100);
ctx.lineTo(0, 90);
ctx.closePath();
ctx.fill();

to call getContext to return the canvas context.

Then we set the fill color with

ctx.fillStyle = "#f00";

Then we call moveTo to move to the first point of the polygon.

Next, we call lineTo to draw lines to the point in the argument from the previous point.

Then we call closePath to close the polygon.

Finally, we call fill to fill the polygon with the fillStyle color.

Conclusion

To draw polygons on an HTML5 canvas with JavaScript, we call the lineTo method.

Sometimes, we want to detect if HTML form is edited with JavaScript.

In this article, we’ll look at how to detect if HTML form is edited with JavaScript.

How to detect if HTML form is edited with JavaScript?

To detect if HTML form is edited with JavaScript, we can listen to the input event.

For instance, we write

const form = document.getElementById("myForm");

form.addEventListener("input", () => {
  console.log("Form has changed!");
});

to select a form element with getElementById.

Then we call addEventListener to listen to the input event on the form.

It’s triggered if the form’s fields have been changed.

Conclusion

To detect if HTML form is edited with JavaScript, we can listen to the input event.

Sometimes, we want to wait N seconds before continuing to the next line with Puppeteer and JavaScript.

In this article, we’ll look at how to wait N seconds before continuing to the next line with Puppeteer and JavaScript.

How to wait N seconds before continuing to the next line with Puppeteer and JavaScript?

To wait N seconds before continuing to the next line with Puppeteer and JavaScript, we can use the waitForTimeout method.

For instance, we write

await page.waitForTimeout(1000)

to call page.waitForTimeout to wait for 1000 milliseconds before continuing to the next line in an async function.

Conclusion

To wait N seconds before continuing to the next line with Puppeteer and JavaScript, we can use the waitForTimeout method.