How do I make the label text of an element bold in javascript?

June 1, 2023

My HTML :

<div id="PDF">
    <input type="checkbox" id="pdf" name="pdf" value="pdf">
    <label for="pdf">PDF</label>
</div>

My JS :

document.addEventListener('change',function(event){
    if(event.target.id == "pdf"){
        if(event.target.checked == true){
            event.target.label.style.fontWeight = "bold";
        }
        else{
            event.target.label.style.fontWeight = "normal";
        }
    }
});

To my utter dismay, when I execute the code, I am greeted with this error:

Uncaught TypeError: Cannot read properties of undefined (reading
‘style’)

How do I fix this issue?

>Solution :

There are two main issues here. Firstly, the event target has no attribute of label. You should just select the label explicitly and change the styles. Secondly, I would recommend adding the event listener to only the #pdf div rather than the whole document. This way, you won’t need to check for the ID and the event listener won’t be fired on every change. For example:

document.getElementById("pdf").addEventListener("click", event => {
  const label = document.querySelector("label[for=pdf]");
  if(event.target.checked == true){
    label.style.fontWeight = "bold";
  }
  else{
    label.style.fontWeight = "normal";
  }
})