Javascript true or false test won't output anything

Question

function sub() {
  var num1 = parseInt(document.getElementById("imp").value);
  var yes = "Yup!"
  var no = "Nope..."
  if (imp == "true") {
    output(yes);
  } else if (imp == "false") {
    output(no)
  }
}
    
function output(x) {
  document.getElementById("result").innerHTML = x;
}

body {
  background:green;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Roboto', sans-serif !important;
}
h1 {
  text-align: center;
  color: #ffffff;
  font-size: 4em;
  text-shadow: 4px 4px #000000;
}

p {
  text-align: center;
  color: #ffffff;
  font-size: 4em;
  text-shadow: 4px 4px #000000;
}

<p>TRUE OR FALSE</p>
<p>Polar bears have black skin.</p>
<input type="text" id="imp">
<button onclick="sub()">Submit</button>
<div id="result"></div>

Answer 1

First off, it seems you meant to check the value of num1 and not imp (which doesn't exist in your code but is the name of the element you're getting the value from). I just changed the variable name to userInput to make it more clear that's what you're getting from the user.

Second, you're expecting either a "true" or "false" string from the user to make a check on, but you're trying to convert that to an integer. Remove the parseInt(). I added toLowerCase() on the end instead to prevent an error in the scenario the user uses any capitalization ('True', 'False', 'tRuE', 'fAlSe', etc).

Lastly, I'd recommend adding a final else statement to the end of your conditional check as a fallback for if the user does not enter 'true' or 'false' (always idiot-proof your UI to handle if the user entered anything unusual or unexpected).

function sub() {
  var userInput = document.getElementById("imp").value.toLowerCase();
  var yes = "Yup!";
  var no = "Nope...";
  var idk = "Invalid input";

  if (userInput == "true") {
    output(yes);
  } else if (userInput == "false") {
    output(no);
  } else {
    output(idk);
  }
}
    
function output(x) {
  document.getElementById("result").innerHTML = x;
}

body {
  background:green;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Roboto', sans-serif !important;
}
h1 {
  text-align: center;
  color: #ffffff;
  font-size: 4em;
  text-shadow: 4px 4px #000000;
}

p {
  text-align: center;
  color: #ffffff;
  font-size: 4em;
  text-shadow: 4px 4px #000000;
}

<p>TRUE OR FALSE</p>
<p>Polar bears have black skin.</p>
<input type="text" id="imp">
<button onclick="sub()">Submit</button>
<div id="result"></div>