html - Javascript - how to change innerText of label while not wiping out the input -
i ask how - javascript - change label innertext of radio buttons (see code below) while not wiping out input tag inside. label innertext here means "button-label-x".
i've tried diagnose label style via elements of document.getelementsbyclassname("radio-label"), including
- textcontent: "button-label-x"
- innertext :"button-label-x"
- outertext :"button-label-x"
then assigned new string value (ex. "button-label-y") them. however, ways lead same result: input disappeared, new value left. has idea here?
<div class="radio"> <label class="radio-label"><input type="radio" name="optradio"> button-label-x </label> </div> of course, way around putting input tag outside of label, solved. but, case, must set id input , "for:id" label. , becomes tedious work case of 05 buttons instead of 01 one.
if understand correctly, can access text part childnodes. once have it, can change text set property textcontent wanted text.
like this:
function changelabeltext(label, text) { var children = label.childnodes; [].foreach.call(children, function(child) { if (child.nodetype == 3) { child.textcontent = text; } }); } var label = document.queryselector('label'); changelabeltext(label, 'blabla'); <div class="radio"> <label class="radio-label"><input type="radio" name="optradio"> button-label-x </label> </div>
Comments
Post a Comment