Multiply a variable and store that value/output to screen-CodePudding

I have tried a bunch of ways to get this to work. I'm not a coder, and I have a frankensteined abomination of a counter program I put together as a replacement for our expensive counters that kept breaking on us (basically you input a value at the start of the day, and based on that value a calculation is done for the GOAL for the day).

I now want to add a GOAL BY LUNCH field/display that - however simply doing something like var lunchgoal = goal * 0.69; And then putting it on the page like I have with the goal field, does not seem to work. I can either get it to display 0 - which seems like its displaying just the basic 0 value of goal before it is being incremented, or NaN - not a number. So I thought I need to convert it to a number before multiplying it, but I nothing has worked for me for that. Right now I'm guessing it may be a matter of where they are contained on the page? I find that part of this confusing honestly. Any help is much appreciated, I would have thought this would be fairly simple! Thank you!

HTML

<html>
    <style>
        body {background-color: Black;}
        p    {color: white;}
    </style>
    <div >
        <p> SAMS VALUE: <span id="output"> </span>
        </p>
        <p style="font-size:110px"> GOAL: <span id="output2"> </span>
        </p>
        <button style="background-color:white;width:20%;height:15%;font-size: 60px" type="button" onClick="onClick()">ACTUAL</button>
        <p style="font-size:110px">Actual Count: <span id="clicks">0</span>
        </p>
        <div >
            <div />
            <div >
                <div id="timeContainer" >
                    <time id="timerValue"/>
                </div>
                <div id="timerButtons">
                    <button id="start"  disabled="disabled">START</button>
                    <button id="stop" >STOP</button>
                    <button id="reset" >RESET</button>
                </div>
                <div />
            </div>
        </div>
    </div>
</html>

Script

<script type="text/javascript">
    document.addEventListener("keyup", function(event) {
        if (event.keyCode === 109) {
            event.preventDefault();
            clicks  = 1;
            document.getElementById("clicks").innerHTML = clicks;
        }
    });

    document.addEventListener("keyup", function(event) {
        if (event.keyCode === 107) {
            event.preventDefault();
            document.getElementById("stop").click();
        }
    });

    var clicks = 0;
    function onClick() {
        clicks  = 1;
        document.getElementById("clicks").innerHTML = clicks;
    };

    const input = parseInt(prompt("Enter a SAMS number: "));
    var SAMSINPUT = input;
    console.log(SAMSINPUT);
    document.getElementById('output').innerHTML = SAMSINPUT;
    var goal = 0;
    var output2 = document.getElementById('output2');

    //set interval for GOAL calculation
    var samsInterval = setInterval(function doIncrement() {
        if (clear == false) {
        goal  = 1;
        output2.innerHTML = goal.toString();
        }
    }, SAMSINPUT * 1000);

    var timerDiv = document.getElementById('timerValue'),
        start = document.getElementById('start'),
        stop = document.getElementById('stop'),
        reset = document.getElementById('reset'),
        clear = false,
        t;
</script>

CodePudding user response：

You have to do it in loop where goal is changing & you want this to change as well.otherwise it just stays on 0. i shortened the timer for demo purpose

document.addEventListener("keyup", function(event) {
  if (event.keyCode === 109) {
    event.preventDefault();
    clicks  = 1;
    document.getElementById("clicks").innerHTML = clicks;
  }
});

document.addEventListener("keyup", function(event) {
  if (event.keyCode === 107) {
    event.preventDefault();
    document.getElementById("stop").click();
  }
});

var clicks = 0;

function onClick() {
  clicks  = 1;
  document.getElementById("clicks").innerHTML = clicks;
};

const input = parseInt(prompt("Enter a SAMS number: "));
var SAMSINPUT = input;
// console.log(SAMSINPUT);
document.getElementById('output').innerHTML = SAMSINPUT;
var goal = 0;
var output2 = document.getElementById('output2');

//set interval for GOAL calculation
var samsInterval = setInterval(function doIncrement() {
  if (clear == false) {
    goal  = 1;
    output2.innerHTML = goal.toString();
    var lunchGoalNumber = goal * 0.69;
    var output3 = document.getElementById("output3")
    output3.innerHTML = lunchGoalNumber;

  }
}, SAMSINPUT * 25);

var timerDiv = document.getElementById('timerValue'),
  start = document.getElementById('start'),
  stop = document.getElementById('stop'),
  reset = document.getElementById('reset'),
  clear = false;

<div >
  <p> SAMS VALUE: <span id="output"> </span></p>

  <p style="font-size:50px"> GOAL: <span id="output2"> </span></p>
  <p style="font-size:50px"> Lunch/GOAL: <span id="output3"> </span></p>

  <button style="background-color:white;width:35%;height:15%;font-size: 60px" type="button" onClick="onClick()">ACTUAL</button>
  <p style="font-size:50px">Actual Count: <span id="clicks">0</span></p>
  <div >
    <div ></div>
    <div >
      <div id="timeContainer" >
        <time id="timerValue"></time>
      </div>
      <div id="timerButtons">
        <button id="start"  disabled="disabled">START</button>
        <button id="stop" >STOP</button>
        <button id="reset" >RESET</button>
      </div>
      <div ></div>
    </div>
  </div>
</div>
</body>