How to change label value using javascript

Question

I want to change the value of the label from "0" to "thank you" in the lower label, when an event is clicked on the checkbox.

<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"/>

Javascript is as follows.

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 that does not work. Any idea?

Answer 1

You accept nameat document.getElementById(). Your cbshould be txt206451 (Attribute ID), not an attribute name.

Or

You can use it document.getElementsByName()

var cb = document.getElementsByName('field206451')[0]; // First one

OR

var cb = document.getElementById('txt206451');

And to set the values ​​to hidden use document.getElementsByName()as below

var cb = document.getElementById('txt206451');
var label = document.getElementsByName('label206451')[0]; // Get the first one of index
console.log(label);
cb.addEventListener('change', function (evt) { // use change here. not neccessarily
    if (this.checked) {
        label.value = 'Thanks'
    } else {
        label.value = '0'
    }
}, false);

Demo script

Answer 2

very simple

$('#label-ID').text("label value which you want to set");

Answer 3

Chrome

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

, , ..

---

querySelector

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

Answer 4

Try

use idfor hidden field and use id checkboxin javascript.

and change ClientIDMode="static"too

<input type="hidden" ClientIDMode="static" id="label1" name="label206451" value="0" />

   <script type="text/javascript"> 
    var cb = document.getElementById('txt206451');
    var label = document.getElementById('label1');
    cb.addEventListener('click',function(evt){
    if(cb.checked){
        label.value='Thanks'
    }else{
        label.value='0'
    }
    },false);
    </script>

Answer 5

Based on your code, I created this Fiddle.
You should use

var cb = document.getElementsByName('field206451')[0];
var label = document.getElementsByName('label206451')[0];

if you want to use name attributes, then you need to take an index, since this is a list of elements, not just one. Everything else worked well.