Reputation: 48983
Using native JavaScript I need to change the text below that is None
to Black
I know this would be easy with Jquery or other libraries but in this project I cannot use them, can someone help me to do this please?
<li>
<input type="radio" id="options_82" class="radio product-custom-option" name="options[82]">
<span class="label">
<label for="options_82">None</label>
</span>
</li>
Upvotes: 0
Views: 848
Reputation: 1254
Assuming you need to match for the for
attribute (your html structure looks like you probably have more than one of these) you can use getElementsByTagName
to fetch your labels, and then loop through them comparing the for
attribute.
function getLabel(for) {
var labels = document.getElementsByTagName('label');
for (var i = 0, c = labels.length; i < c; i++) {
if (labels[i].getAttribute('for') === for) {
return labels[i];
}
}
}
Then, you can edit the element's innerHTML
value.
var label = getLabel('forvalue');
if (label) {
label.innerHTML = 'new text';
}
Upvotes: 1
Reputation: 50269
Get the element using querySelector
, getElementById
, etc. and then set it to 'Black'
using either the textContent
or innerHTML
properties. It's best practice to use textContent
unless you're actually setting HTML.
document.querySelector('label[for="options_82"]').textContent = 'Black';
A more complex selector using the ID may be faster than the above:
document.querySelector('#options_82 + .label label').textContent = 'Black';
Upvotes: 2