如何使用Javascript将属性中的值获取到另一个属性

Question

<input type="checkbox" onfocus="EnsureSelectionHandlerOnFocus(event,this,12)" onclick="ToggleAllItems(event,this,12)" title="Select or deselect all items" class="s4-selectAllCbx">

Whenever I refresh the page, these attributes have been changed with "12" in both EnsureSelectionHandlerOnFocus and ToggleAllItems. Therefore, I would like to get "12" of the onfocus and set "12" to the onlick attribute with Javascript?

Answer 1

If I understand you correct, you want to extract the number - the last param of the inline event listeners?

//get the event, example EnsureSelectionHandlerOnFocus(event,this,12)
var event = document.getElementById('cbSelectAll').getAttribute('onfocus');

//extract the params, example event,this,12
var params = event.match(/\(([^)]+)\)/)[1];

//get the last param, example 12
var number = params.split(',')[2];

//outputs 12
console.log(number);

To set the onclick event number param :

var click = 'ToggleAllItems(event, this, NUMBER)';
click = click.replace('NUMBER', number);
document.getElementById('cbSelectAll').setAttribute('onclick', click);

---

Example alternatives to document.getElementById

//selecting the checkbox by its class (if the class is unique)
var element = document.querySelector('.s4-selectAllCbx');
console.log(element);

//alternatively selecting the checkbox by an attribute
var element = document.querySelector('[title="Select or deselect all items"]');
console.log(element);

or add an unique name to the checkbox :

<input type="checkbox" name="myCheckBox" ...>

var element = document.querySelector('[name="myCheckBox"]');
console.log(element);

both will return the checkbox. If multiple elements has the same class or the same attribute, the first occurrence in the document will be returned. Giving the checkbox an unique class is prefered, imho, since you will have to update your code each time you change the attribute of the title .