How to change an input attribute using javascript?

Question

I have an input like this:

<input id="xx" data-p="">

How can i change the value inside data-p using javascript?

Answer 1

You can use querySelctor() to select input and setAttribute() to set value of data-p.

document.querySelector('input[data-p]').setAttribute('data-p', 'something')

document.querySelector('input[data-p]').setAttribute('data-p', 'something')

<input data-p="">

You can also use HTMLElement.dataset so it will be

document.querySelector('input[data-p]').dataset.p = 'something'

document.querySelector('input[data-p]').dataset.p = 'something'

<input data-p="">

Answer 2

using below code you can do that.

document.getElementById("TextboxID").setAttribute('data-p', 'something')

or

 document.getElementById("TextboxID").attributes["data-p"] = "Value";

Answer 3

What you want to change is called Data Attributes.

To change it use .dataset.p = 'new val'