Update text when you click checkbox

Question

There is an update code address link by clicking on the checkbox

var w = document.querySelector('#wall'), a = document.querySelectorAll('a')[0]; w.onclick = function() { if (w.checked) { a.setAttribute('href', a.getAttribute('href').replace(/^(.*\&scope\=(?:[A-Za-z_0-9-]+\,?)*)[^&]*(\&.*)$/, '$1wall,$2')); } else { a.setAttribute('href', a.getAttribute('href').replace(/^(.*\&scope\=)[^&]*(\&.*)$/, '$1$2')); } console.log(a.getAttribute('href')); } var m = document.querySelector('#messages'), a = document.querySelectorAll('a')[0]; m.onclick = function() { if (m.checked) { a.setAttribute('href', a.getAttribute('href').replace(/^(.*\&scope\=(?:[A-Za-z_0-9-]+\,?)*)[^&]*(\&.*)$/, '$1messages,$2')); } else { a.setAttribute('href', a.getAttribute('href').replace(/^(.*\&scope\=)[^&]*(\&.*)$/, '$1$2')); } console.log(a.getAttribute('href')); }

 <a href='https://oauth.vk.com/authorize?client_id=4113&scope=notify,&redirect_uri=https://oauth.vk.com/blank.html&response_type=token'><b>ссылке</b></a> <input type="checkbox" id="wall">Отправка посто <br> <input type="checkbox" id="messages">Работа с сообщениями <br>

Everything works, but if you insert another link before the link, the code stops working. I tried changing a = document.querySelectorAll('a')[0-на другие]; on a = document.querySelectorAll('#someid')[0]; To the link I substituted id="someid" . He began to change the first link, although the first link had no id at all.

You do not have a structured document, that is, there is no connection between the specified Input tag and the a tag.
Therefore, adding any element with the a tag breaks the function.
It is also completely pointless to use querySelector for an element that has an id.
at least because this function is supported only by new browsers and is inefficient compared to getElementById

Anton Shchyrov Anton Shchyrov 23.5k 2 14 44 · Accepted Answer · 2017-02-07T12:50:27

Something you do not agree. Everything works if the item is properly addressed.

 var w = document.querySelector('#wall'), a = document.querySelectorAll('#link')[0]; w.onclick = function() { if (w.checked) { a.setAttribute('href', a.getAttribute('href').replace(/^(.*\&scope\=(?:[A-Za-z_0-9-]+\,?)*)[^&]*(\&.*)$/, '$1wall,$2')); } else { a.setAttribute('href', a.getAttribute('href').replace(/^(.*\&scope\=)[^&]*(\&.*)$/, '$1$2')); } console.log(a.getAttribute('href')); } var m = document.querySelector('#messages'), a = document.querySelectorAll('#link')[0]; m.onclick = function() { if (m.checked) { a.setAttribute('href', a.getAttribute('href').replace(/^(.*\&scope\=(?:[A-Za-z_0-9-]+\,?)*)[^&]*(\&.*)$/, '$1messages,$2')); } else { a.setAttribute('href', a.getAttribute('href').replace(/^(.*\&scope\=)[^&]*(\&.*)$/, '$1$2')); } console.log(a.getAttribute('href')); }

 <a href="javascript:void(0)">Test</a> <a href='https://oauth.vk.com/authorize?client_id=4113&scope=notify,&redirect_uri=https://oauth.vk.com/blank.html&response_type=token' id="link"><b>ссылке</b></a> <input type="checkbox" id="wall">Отправка посто <br> <input type="checkbox" id="messages">Работа с сообщениями <br>

Explain to me what is the point of using querySelectorAll for an element that has an id?
Or are you trying to make the function as ineffective as possible?
@VladfromMoscow Maybe the author then hangs his tricky selectors.

Update text when you click checkbox

1 answer 1

More articles: