The function is working on the HTML page but not working from the external JS file and showing this error ('checkSelection' is declared but its value is never read). Is there any solution for this?

   function checkSelection(that) {
    if (that.value == "web-dev") {
      document.getElementById("web-section").style.display = "block";
    } else {
      document.getElementById("web-section").style.display = "none";
    }
    if (that.value == "grp-dsg") {
      document.getElementById("graphic-section").style.display = "block";
    } else {
      document.getElementById("graphic-section").style.display = "none";
    }
    if (that.value == "dgt-mkt") {
      document.getElementById("marketing-section").style.display = "block";
    } else {
      document.getElementById("marketing-section").style.display = "none";
    }
  }

<input onchange="checkSelection(this);">

The function is working on the HTML page but not working from the external JS file and showing this error ('checkSelection' is declared but its value is never read). Is there any solution for this?

   function checkSelection(that) {
    if (that.value == "web-dev") {
      document.getElementById("web-section").style.display = "block";
    } else {
      document.getElementById("web-section").style.display = "none";
    }
    if (that.value == "grp-dsg") {
      document.getElementById("graphic-section").style.display = "block";
    } else {
      document.getElementById("graphic-section").style.display = "none";
    }
    if (that.value == "dgt-mkt") {
      document.getElementById("marketing-section").style.display = "block";
    } else {
      document.getElementById("marketing-section").style.display = "none";
    }
  }

<input onchange="checkSelection(this);">

• javascript

• 2 That's a lint error. You probably need to turn it off at least for this function. – VLAZ Commented Mar 16, 2022 at 6:50
• The sentence would likely appear on your editor/IDE app. You can ignore it or set up the linting to ignore that warning. – Dhana D. Commented Mar 16, 2022 at 7:04
• Not relevant to solve your issue, but that is a pretty bad parameter name. A better name would be htmlInput or input since you pass a HTMLInputElement instance to the function. – 3limin4t0r Commented Jun 27, 2023 at 21:09

3 Answers 3

That is an error reported by the TypeScript checker in your IDE. To make it go away, this would be a workaround:

window.checkSelection = function(that) {
    if (that.value == "web-dev") {
      document.getElementById("web-section").style.display = "block";
    } else {
      document.getElementById("web-section").style.display = "none";
    }
    if (that.value == "grp-dsg") {
      document.getElementById("graphic-section").style.display = "block";
    } else {
      document.getElementById("graphic-section").style.display = "none";
    }
    if (that.value == "dgt-mkt") {
      document.getElementById("marketing-section").style.display = "block";
    } else {
      document.getElementById("marketing-section").style.display = "none";
    }
  }

The basic problem though is your use of inline event listeners, which is widely considered bad practice. Instead, I'd remend you give that input an id and use addEventListener:

document.getElementById('section-picker').addEventListener('change', function() {
    if (this.value == "web-dev") {
      document.getElementById("web-section").style.display = "block";
    } else {
      document.getElementById("web-section").style.display = "none";
    }
    if (this.value == "grp-dsg") {
      document.getElementById("graphic-section").style.display = "block";
    } else {
      document.getElementById("graphic-section").style.display = "none";
    }
    if (this.value == "dgt-mkt") {
      document.getElementById("marketing-section").style.display = "block";
    } else {
      document.getElementById("marketing-section").style.display = "none";
    }
  });

If you take this advice, you need to make sure the Javascript executes after that input in the page is parsed. The easiest way to achieve that is by applying the defer attribute in the script tag.

you need listen for the input first before using that in your function

let number = document.querySelector('input');

function check(that){
  if(that.value == 1){
    console.log('hello');
   }
   else{
    console.log('bye');
   }
 }
 
 number.addEventListener('input', ()=>{
  check(number);
 });

<input type="number">

take this for an example, you assign the input to a variable and then whenever that number is changed you run the function to check the value and display the result. same thing goes for checkbox too.

Here is another way of writing it, observing the DRY principle and being tolerant in case some of the quoted DOM elements do not actually exist:

  
function checkSelection() {
  const ids={"web-dev":"web-section","grp-dsg":"graphic-section","dgt-mkt":"marketing-section","missing":"someId"};
  let div=document.getElementById(ids[this.value]);
  Object.values(ids).forEach(id=>{
   let d=document.getElementById(id);
   if(d) d.style.display=d==div?"":"none";
  });
}
document.querySelector("input").addEventListener("input",checkSelection);
checkSelection();

<input type="text" placeholder="section name ..." value="missing">

<div id="web-section">this is the WEB SECTION!</div>
<div id="graphic-section">this is the GRAPHIC SECTION!</div>
<div id="marketing-section">and is the MARKETING SECTION!</div>
<div id="other">this is another section.</div>