How to change tag value on any web site

Question

There is a website that contains this code

<div id = "agreement_btn" class = "agreement_form button" gt-form-status = "">

I want to adjust the value of the tag ((gt-form-status)) So that in the end:

<div id = "agreement_btn" class = "agreement_form button" gt-form-status = "signed">

By creating a Bookmarklet that starts with javascript: ....

Can I do this? Greetings

Answer 1

You can use Element.setAttribute to set a non-existent attribute on an Element.

document.querySelector('#agreement_btn').setAttribute('gt-form-status', 'signed');

var element = document.querySelector('#agreement_btn');
console.log('element before setAttribute:', element.outerHTML);
element.setAttribute('gt-form-status', 'signed');
console.log('element after setAttribute:', element.outerHTML);

<div id = "agreement_btn" class = "agreement_form button" gt-form-status = ""></div>

However, it is better practice to use data-attributes in case some attributes you use get standardized later.

var element = document.querySelector('#agreement_btn');
console.log('element before set attribute:', element.outerHTML);
element.dataset.gtFormStatus = "signed";
console.log('element after set attribute:', element.outerHTML);

<div id = "agreement_btn" class = "agreement_form button" data-gt-form-status = ""></div>