Note that there are some explanatory texts on larger screens.

plurals
  1. POCan't get a user input variable to pass into the rest of script
    primarykey
    data
    text
    <p>I'm trying to use a stop watch to show how much people get paid per x time they work. I can't get the user to input their salary and then pass this number along to the script. I keep getting NaN as a result. Its easy to use a 'prompt' function, but I would prefer some input on the page. </p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style&gt; body { background: #0e415f; min-width:800px; max-width:2400px; font-family: Omnes, Myriad Pro, arial, Helvetica; color: #f1a400;} .header { width: 800px; margin: 0 auto;} .clock { border: 3px solid #f1a400 double; border-radius: 10px; border-style: double; width: 600px; margin: 20 auto; font-size: 10em; text-align:center;} .money { border: 3px solid #f1a400 double; border-radius: 10px; border-style: double; width: 600px; margin: 20 auto; font-size: 10em; text-align:center;} .buttons { width: 350px; margin: 20 auto;} .button_style{ height:50px; width:100px; font-size:20px; margin: 0 .3em; background: #f1a400; border-radius: 10px; border: 0;} &lt;/style&gt; &lt;script type="text/javascript"&gt; function getSalary() { var salaryAm = document.getElementById("salaries"); var salary = salaryAm.value;} var seconds=-1.0; /* To start clock at 0 seconds */ var min=0; var time; var secPay = Number(salary)/(52*40*60*60); /* Weeks * Hours * Minutes * Seconds */ var timerPay = 0; function timer(){ seconds++; if(seconds&gt;59){ min++; document.getElementById("mins").innerHTML=padTimer(min); seconds=0;} document.getElementById("secs").innerHTML=padTimer(seconds); document.getElementById("money").innerHTML=parseFloat(secPay*timerPay++).toFixed(2); }; function padTimer(x) { if (x&lt;=9) { x = ("0"+x); } return x;} function start(){ time=setInterval(timer, 1000); timer;} function pause() { clearInterval(time); seconds--; timerPay--;}; function reset(){ seconds=-1.0; timerPay=0; time=0; if (min !=0){ min=0;}}; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;input id="salaries" type="text"&gt; &lt;div class="header"&gt;&lt;img src="breakcalc.png"&gt;&lt;/div&gt; &lt;div class="clock"&gt; &lt;span id="mins" &gt;00&lt;/span&gt;:&lt;span id="secs"&gt;00&lt;/span&gt;&lt;br&gt; &lt;/div&gt; &lt;div class="money"&gt; &lt;span&gt;$ &lt;/span&gt;&lt;span id="money"&gt;0.00&lt;/span&gt; &lt;/div&gt; &lt;div class="buttons"&gt; &lt;a href="#" id="button" onclick="start()" ondblclick="return false;"&gt;&lt;button class="button_style"&gt;Start&lt;/button&gt;&lt;/a&gt; &lt;a href="#" id="button" onclick="pause()"&gt;&lt;button class="button_style"&gt;Stop&lt;/button&gt;&lt;/a&gt; &lt;a href="#" id="button" onclick="reset()"&gt;&lt;button class="button_style"&gt;Reset&lt;/button&gt;&lt;/a&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload