CODEWITHSUNDEEP
javascripthtml
Stephen Agbenu
Stephen Agbenu

Reputation: 69

JS output not showing in id tag

The purpose of it is to perform a series of arithmetic to get a certain value when a certain value is entered into the html input box.

The issue that I am having with my program is that it is not showing any output when I press the calculate button in the html section. Could I get some assistance as to what I did wrong?

var salaryArray = [];
var input = document.getElementById('totalHours');
var screen = document.getElementById('results');
var wage = 15;
var hours = parseInt(input.value);

document.getElementById('calculate').onclick = function() {
  if (hours > 40) {
    var calculate = wage * hours + ((hours - 40) * wage * 1.5);
    salaryArray.push(calculate);
    screen.innerHTML = calculate;

  } else if (hours >= 0 && hours <= 40) {
    var calculate = wage * hours;
    salaryArray.push(calculate);
    screen.innerHTML = calculate;

  } else if (hours < 0) {
    salaryArray.push(calculate);
    screen.innerHTML = array;
  }

};
<link href="salary.css" rel="stylesheet" type="text/css">
<p> Enter the following information to calculate your pay.</p>

<p> Hours Per Week: </p>
<input type="text" name="hours" id="totalHours" /></p>
<button type="button" id="calculate">Calculate</button></p>

<div id="results"></div>
<p id="receipt"></p>

Upvotes: 0

Views: 48

Answers (3)

Lisbel Cruz
Lisbel Cruz

Reputation: 41

You have to put hours inside the function so you can get the typed value, and declare calculate at the top so is available to be used in all the if statements, right now the last if is using calculate out of the scope.

var salaryArray = [];
var input = document.getElementById('totalHours');
var screen = document.getElementById('results');
var wage = 15;

document.getElementById('calculate').onclick = function() {

var hours = parseInt(input.value);
var calculate = 0; // example of initial value
  
  if (hours > 40) {
    calculate = wage * hours + ((hours - 40) * wage * 1.5);
    salaryArray.push(calculate);
    screen.innerHTML = calculate;

  } else if (hours >= 0 && hours <= 40) {
    
    calculate = wage * hours;
    salaryArray.push(calculate);
    screen.innerHTML = calculate;

  } else if (hours < 0) {
    
    salaryArray.push(calculate);
    screen.innerHTML = array;
    
  }

};
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<link href="salary.css" rel="stylesheet" type="text/css">
<p> Enter the following information to calculate your pay.</p>

<p> Hours Per Week: </p>
<input type="text" name="hours" id="totalHours" /></p>
<button type="button" id="calculate">Calculate</button></p>

<div id="results"></div>
<p id="receipt"></p>
</body>
</html>

Upvotes: 0

Barmar
Barmar

Reputation: 781708

Put the hours assignment inside the callback function.

var salaryArray = [];
var input = document.getElementById('totalHours');
var screen = document.getElementById('results');
var wage = 15;

document.getElementById('calculate').onclick = function() {
  var hours = parseInt(input.value);
  if (hours > 40) {
    var calculate = wage * hours + ((hours - 40) * wage * 1.5);
    salaryArray.push(calculate);
    screen.innerHTML = calculate;

  } else if (hours >= 0 && hours <= 40) {
    var calculate = wage * hours;
    salaryArray.push(calculate);
    screen.innerHTML = calculate;

  } else if (hours < 0) {
    salaryArray.push(calculate);
    screen.innerHTML = array;
  }

};
<link href="salary.css" rel="stylesheet" type="text/css">
<p> Enter the following information to calculate your pay.</p>

<p> Hours Per Week: </p>
<input type="text" name="hours" id="totalHours" /></p>
<button type="button" id="calculate">Calculate</button></p>

<div id="results"></div>
<p id="receipt"></p>

This works for the cases where hours >= 0. I don't understand what you're trying to do in the negative case. You push calculate onto the array without setting it to anything, and then you assign an undefined variable array to screen.innerHTML.

Upvotes: 0

DCR
DCR

Reputation: 15700

You need to place your globals inside the function. Also, you need to check hours for isNaN

document.getElementById('calculate').onclick = function() {

var salaryArray = [];
var input = document.getElementById('totalHours');
var screen = document.getElementById('results');
var wage = 15;
var hours = parseInt(input.value);
if(isNaN(hours))hours=0;

 if (hours > 40) {
    var calculate = wage * hours + ((hours - 40) * wage * 1.5);
    salaryArray.push(calculate);
    screen.innerHTML = calculate;

 } else if (hours >= 0 && hours <= 40) {
    var calculate = wage * hours;
    salaryArray.push(calculate);
    screen.innerHTML = calculate;

 } else if (hours < 0) {
    salaryArray.push(calculate);
    screen.innerHTML = salaryArray;
    }

};
<!doctype html>
<html>
<head>

</head>
<body>

<p> Enter the following information to calculate your pay.</p>

    <p> Hours Per Week: </p>
    <input type="text" name="hours" id="totalHours"/>
    <button type = "button" id = "calculate">Calculate</button>
    <div id= "results"></div>
    <p id ="receipt"></p>
    
</body>
</html>

Upvotes: 0

Related Questions