Author: John Au-Yeung

Sometimes, we want to set volume of audio element with JavaScript.

In this article, we’ll look at how to set volume of audio element with JavaScript.

How to set volume of audio element with JavaScript?

To set volume of audio element with JavaScript, we set its volume property.

For instance, we write

const audio = new Audio("test.wav");
audio.volume = 0.2;

to create an Audio object.

Then we set its volume property to set the volume level.

Conclusion

To set volume of audio element with JavaScript, we set its volume property.

Sometimes, we want to get all elements which name starts with some string with JavaScript.

In this article, we’ll look at how to get all elements which name starts with some string with JavaScript.

How to get all elements which name starts with some string with JavaScript?

To get all elements which name starts with some string with JavaScript, we call querySelectorAll.

For instance, we write

const els = document.querySelectorAll("[name^=q1_]");

to call querySelectorAll to select all elements with the name attribute starting with q1_ in document.

Conclusion

To get all elements which name starts with some string with JavaScript, we call querySelectorAll.

To pass parameters in JavaScript onClick event, we set the onclick property of each element to its own click handler.

For instance, we write

for (let i = 0; i < 10; i++) {
  const link = document.createElement("a");
  link.setAttribute("href", "#");
  link.innerHTML = i.toString();
  link.onclick = () => {
    onClickLink(i.toString());
  };
  div.appendChild(link);
  div.appendChild(document.createElement("BR"));
}

to use a for loop to loop from 0 to 9.

In it, we create a link with createElement.

Then we call setAttribute to set the eleemnt’s href attribute value.

Next, we set its innerHTML property to the link text.

We then set its onclick property to the click event handler.

We set it to a function that calls onClickLink with i converted to a string.

Then we call appendChild to append the link to a div.

And we call it again to append a br element.

Sometimes, we want to get name of form element with JavaScript.

In this article, we’ll look at how to get name of form element with JavaScript.

How to get name of form element with JavaScript?

To get name of form element with JavaScript, we use the getAttribute method.

For instance, we write

const name = element.getAttribute("name");

to call element.getAttribute with 'name' to get the value of the name attribute of the element.

Conclusion

To get name of form element with JavaScript, we use the getAttribute method.

Sometimes, we want to detect a long touch pressure with JavaScript for Android and iPhone.

In this article, we’ll look at how to detect a long touch pressure with JavaScript for Android and iPhone.

How to detect a long touch pressure with JavaScript for Android and iPhone?

To detect a long touch pressure with JavaScript for Android and iPhone, we listen to the touchstart and touchend events.

For instance, we write

let touchStartTimeStamp = 0;
let touchEndTimeStamp = 0;

const onTouchStart = (e) => {
  touchStartTimeStamp = e.timeStamp;
};

const onTouchEnd = (e) => {
  touchEndTimeStamp = e.timeStamp;

  console.log(touchEndTimeStamp - touchStartTimeStamp);
};

window.addEventListener("touchstart", onTouchStart, false);
window.addEventListener("touchend", onTouchEnd, false);

to call addEventListener to listen for the touchstart and touchend events on window.

Then we get the timeStamp of when the touch starts from onTouchStart.

And we get the timeStamp of when the touch ends from onTouchEnd.

We also subtract touchEndTimeStamp by touchStartTimeStamp to get the touch duration in milliseconds.

Conclusion

To detect a long touch pressure with JavaScript for Android and iPhone, we listen to the touchstart and touchend events.