JSJunkie JSJunkie - 7 months ago 8
Javascript Question

Trying to understand JS functions - what am I doing wrong?

I'm currently working my way through a beginner's JavaScript course on Treehouse and keep getting stuck on functions. In effort to understand better, I tried creating a calculator which converts human years to dog years. Here is my code so far:

HTML:

<div id="calculator">
<form>
<label>What is your current age in human years? <br>
<input type="text" id="humanYears"></label> <br>
<button type="text" id="calculate">Calculate</button>
</form>
</div>


JS:

function calculate() {
var humanYears = document.getElementById("humanYears").value;
var dogYears = (humanYears * 7);
document.write(dogYears);
}

document.getElementById("calculate").onclick = function(){calculate(); };


The page flickers and I keep seeing the form, no result.

I know this code is incorrect but I don't understand why. I also know I can just copy other people's code from Github and have a functioning calculator but that kind of defeats the purpose of learning. I would rather know why my code doesn't work and what I can do to fix it. (I double, triple checked that the HTML and JS files were properly linked, which they are.)

Any JS wizards out there care to chime in?

Edit: When I enter an age into the form, it merely reloads, rather than displaying the age in dog years (which is the desired outcome).

Edit 2: Thank you all so much for your help. I've had some success, the age is now calculated and displayed. I also (attempted to) program a window that pops up if the button is clicked and the age field left blank or entered at 0, but so far nothing appears. Here is my newly edited code:

HTML:
<div id="container">
<div id="calculator">
<form>
<p>
<label>What is your current age in human years?
<input type="text" id="humanYears"></label></p>
<p>
<button type="button" id="calculate">Calculate</button></p>
<p>
<span id="answer"></span>
</p>
</form>
</div>
</div>


JS:

function calculateAge() {
var humanYears = document.getElementById("humanYears").value;
if (humanYears === 0 || "") {
window.alert("Please enter your age.");
return;
}

var dogYears=humanYears * 7;

document.getElementById("answer").innerHTML = "That means you are " + dogYears + " in dog years!";
}

document.getElementById("calculate").onclick = function() { calculateAge(); };


I'm a little bit shaky on conditionals but I'm not sure why the popup isn't appearing. Any ideas?

Answer

Here your working code with as little changes as possible:

<div id="calculator">
  <form>
    <label>What is your current age in human years? <br>
    <input type="text" id="humanYears"></label> <br>
    <button type="text" id="calculate">Calculate</button>
  </form>
</div>

<script>
  function calculate() {
    var humanYears = document.getElementById("humanYears").value;
    var dogYears = (humanYears * 7);
    document.write(dogYears);
  }

  document.getElementById("calculate").onclick = function(){calculate(); return false; };
</script>
  • Assuming you put everything in one file the script tags are missing. If not then you still need a script tag to load the JS file.
  • Your function needed a "return false;". If you omit that, the page will reload after writing your output and won't see the output. That happens because the default behaviour of a button in a form is to reload the page. By returning "false" you suppress that.