How to change Label Value using javascript

Question

I want to change the label value from '0' to 'thanks' in below label, on checkbox click event.

<input type="hidden" name="label206451" value="0" />
<label for="txt206451" class="swatch_text" >Chestnut Leather</label>
<input type="checkbox" name="field206451" class="swatch_check" id="txt206451" value="SELECTED"/>

The Javascript is as below.

var cb = document.getElementById('field206451');
var label = document.getElementById('label206451');
cb.addEventListener('click',function(evt){
    if(cb.checked){
        label.value='Thanks';
    }else{
        label.value='0';
    }
},false);

But this is not working. Any idea?

Answer 1

This will work in Chrome

// get your input
var input = document.getElementById('txt206451');
// get it's (first) label
var label = input.labels[0];
// change it's content
label.textContent = 'thanks'

But after looking, labels doesn't seem to be widely supported..

---

You can use querySelector

// get txt206451's (first) label
var label = document.querySelector('label[for="txt206451"]');
// change it's content
label.textContent = 'thanks'