Countdown Timer Unable to Work Properly In Chrome Extension Popup

Countdown Timer Unable to Work Properly In Chrome Extension Popup - javascript

I'm building a popup chrome extension that works as a countdown timer, but it is not working as intended. When a user inputs a certain amount of minutes, for instance, seconds will immediately turn to 59 and begin decrementing, but minutes will remain static. The same happens with hours.
This is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<link href="../stylesheet.css" rel="stylesheet">
<title>Study Break Chrome Extension</title>
<!-- <script src="jquery.js"></script> -->
<script src="../popup-script.js"></script>
<script src="../background.js"></script>
<!-- <script src="timer.html"></script> -->
<style>
body {
font-family: "Monaco", monospace;
color: #003c00;
background-image: url('/media/bg2.JPEG');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
html, body {
text-align: center;
width: 325px;
}
</style>
</head>
<body>
<div class="header">
<h1>Study Break!</h1>
</div>
<div class="container">
<div id="work">
<h2 class = "idk">Set A Break Every...</h2>
<p id="workhrlabel" class="workhrlabel">Hours</p>
<p id="workminlabel" class="workminlabel">Minutes</p>
<p id="workseclabel" class="workseclabel">Seconds</p>
<input id="work-hours" type="number" max="99" min="0" value="0" class="worktime">
<p id="p1" class="semicolon">:</p>
<input id="work-minutes" type="number" max="60" min="0" value="0" class="worktime">
<p id="p2" class="semicolon">:</p>
<input id="work-secs" type="number" max="60" min="0" value="0" class="worktime">
</div>
<div id="break">
<h2>For...</h2>
<p id="break-hour-label" class="break-label">Hours</p>
<p id="break-min-label" class="break-label">Minutes</p>
<p id="break-sec-label" class="break-label">Seconds</p>
<input id="break-hours" type="number" max="99" min="0" value="0" class="breaktime">
<p id="p1" class="semicolon">:</p>
<input id="break-minutes" type="number" max="60" min="0" value="0" class="breaktime">
<p id="p2" class="semicolon">:</p>
<input id="break-secs" type="number" max="60" min="0" value="0" class="breaktime">
</div>
<div class = "btns">
<button id="set" class="btn">Set</button>
<button id="reset" class="btn">Reset</button>
</div>
</body>
</html>
My popup-script:
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('set').addEventListener('click', function(){
let selHrs = document.getElementById('work-hours').value;
let selMins = document.getElementById('work-minutes').value;
let selSecs = document.getElementById('work-secs').value;
chrome.runtime.sendMessage({name: 'Timer', hours: selHrs, mins: selMins, secs: selSecs});
});
})
chrome.runtime.onMessage.addListener(function(request, _, _){
if (request.name == 'updateTimer') {
document.getElementById('work-hours').setAttribute('value', request.hours);
document.getElementById('work-minutes').setAttribute('value', request.mins);
console.log(request.mins)
document.getElementById('work-secs').setAttribute('value', request.secs);
}
});
And my background-script:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
let set = document.getElementById('set');
let hours = request.hours;
let mins = request.mins;
let secs = request.secs;
let startTimer = undefined;
if (request.name == "Timer"){
function countdown(hr,mm,ss)
{
var interval = setInterval(function(){
if(hr == 0 && mm == 0 && ss == 0)clearInterval(interval);
if(ss == 0)
{
ss = 59;
if(mm == 0)
{
mm = 59;
if (hr != 0) {
hr--;
}
}
else {
mm--;
}
} else {
ss--;
}
console.log("hours" + hr + "minutes: " + mm + " secondsL " + ss);
chrome.runtime.sendMessage({name: 'updateTimer', hours: hr, mins: mm, secs: ss});
},1000)
}
countdown(hours, mins, secs)
}
})
Any help will be greatly appreciated!

Related

Range Slider made on JS and HTML

I have created a code with 4 range slider that displays only its total in "$" symbol.
This total must not exceed 5 symbols in all 4 sliders.
The objective is that the customer will be able to have a visual appercus without knowing the amount how much his project will cost him.
Here is the code I have done so far.
<div id="container">
<label for="slider1">Titre 1</label>
<input type="range" id="slider1" min="0" max="5" value="0">
<br>
<label for="slider2">Titre 2</label>
<input type="range" id="slider2" min="0" max="5" value="0">
<br>
<label for="slider3">Titre 3</label>
<input type="range" id="slider3" min="0" max="5" value="0">
<br>
<label for="slider4">Titre 4</label>
<input type="range" id="slider4" min="0" max="5" value="0">
<br>
<div id="total">Total: <span id="dollar-signs"></span></div>
</div>
<style>
#container {
display: flex;
flex-direction: column;
}
label {
font-weight: bold;
}
#total {
font-weight: bold;
}
#total.exceeded {
color: red;
}
</style>
<script>
const sliders = document.querySelectorAll("#container input[type=range]");
function updateTotal() {
let total = 0;
sliders.forEach(slider => {
total += Number(slider.value);
});
const totalElement = document.getElementById("total");
const dollarSigns = document.getElementById("dollar-signs");
dollarSigns.innerHTML = "";
for (let i = 0; i < total; i++) {
if (i < 5) {
dollarSigns.innerHTML += "$";
}
}
if (total > 5) {
totalElement.classList.add("exceeded");
} else {
totalElement.classList.remove("exceeded");
}
}
sliders.forEach(slider => {
slider.addEventListener("input", updateTotal);
});
updateTotal();
</script>
I would like someone to help me debug my script to allow the 4 slider to display a maximum of 5 $ sybols.
Currently it does it but not correctly if my 4 sliders are at their maximum it must be 5 symbols.

I get 4.5.525 when adding in html 4.5 + .525 = 5.025 in html [duplicate]

This question already has answers here:
How to force JS to do math instead of putting two strings together [duplicate]
(11 answers)
Closed 1 year ago.
I get 4.5.525 when adding in javascript
this is the answer i have to get 4.5 + .525 = 5.025 but instead of this i get 4.5.525
here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swinburnes Test Of Dc Shunt Motor</title>
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 15px;
background: var(--primary-color);
transition: background 2s;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div style="text-align: center;" class="container col-xs-12 col-md-4">
<h1 style="font-size: 2em;">Swinburnes Calculator (Motor) <span><button class="btn btn-dark badge badge-dark "
style=" margin-left: 101px;
font-size: 12px;" onclick="myFunction()">Dark mode</button></span> </h1>
<div class="inpSection">
<div class="amt">
<label for="VL">VL</label>
<input type="number" name="VL" id="VL" placeholder="Enter VL Value In Name Plate"
style="margin: 2%; margin-left: 6%;">
</div>
<div class="time">
<label for="IL">IL</label>
<input type="number" name="IL" id="IL" placeholder="Enter IL Value"
style="margin: 2%;margin-left: 7%; ">
</div>
<div class="rate">
<label for="Ish">Ish</label>
<input type="number" name="Ish" id="Ish" placeholder="Enter Ish Value"
style="margin: 2%;margin-left: 5%;">
</div>
<div class="rate">
<label for="Ra">Ra</label>
<input type="number" name="Ra" id="Ra" placeholder="Enter Ra value" style="margin: 2%;margin-left: 6%;">
</div>
<div class="rate">
<label for="Load">Load</label>
<input type="number" name="Load" id="Load" placeholder="Enter Load value In Name Plate" style="margin: 2%;">
</div>
<div class="rate">
<label for="noLoad">VL</label>
<input type="number" name="noLoad" id="noLoad" placeholder="Enter NoLoad VL value" style ="margin:2%; margin-left: 6%">
</div>
<div class="button">
<button class="btn btn-success" onclick="Calculate()" style="margin: 2%;
text-align: center;
;
margin-top: 5%;">Calculate</button>
<button class= "btn btn-danger" style="margin: 2%;
text-align: center;
;
margin-top: 5%;" onclick="refreshPage()">Reset All</button>
</div>
<script>
function refreshPage(){
window. location. reload();
}
</script>
<div class="result" style="margin-top: 30px;">
<h3 id="si"></h3>
<h3 id="wv"></h3>
<h3 id="Ip"></h3>
<h3 id="Wc"></h3>
<h3 id="toloss"></h3>
<h3 id="Oppower"></h3>
<h3 id="Eff"></h3>
</div>
</div>
<hr style="height:1px;border:none;color:#333;background-color:#333;" />
<p style=" text-align: center;
margin-top: 30px;">Copyright ©️ 2021 AJB</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
<script>
function Calculate() {
let vl = document.getElementById('VL').value;
let il = document.getElementById('IL').value;
let ish = document.getElementById('Ish').value;
let ra = document.getElementById('Ra').value;
let ld = document.getElementById('Load').value;
let vlo = document.getElementById('noLoad').value;
let SI = (vl * ld)
document.getElementById('si').innerHTML = "O/P : " + SI;
var Iao = (ld+ish);
console.log(Iao)
var WV = (Math.pow(Iao, 2) * ra)
document.getElementById('wv').innerHTML = "Wv : " + WV;
let IP = (vl * il)
document.getElementById('Ip').innerHTML = "No Load I/P Power : " + IP;
var ip21 = (vl*il)
var WcIa = (il - ish)
var WvIa = (Math.pow(WcIa, 2) * ra)
var Wc = (IP - WvIa)
document.getElementById('Wc').innerHTML = "Wc : " + Wc;
var TLoss = (WV + Wc)
document.getElementById('toloss').innerHTML = " Total Loss : " + TLoss;
var OP = (SI + TLoss)
document.getElementById('Oppower').innerHTML = "Input Power : " + OP;
var ef = (SI / OP) * 100
document.getElementById('Eff').innerHTML = " η % : " + ef;
}
</script>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</html>
when i add IL = 4.5 and Ish = .525 it gives 4.5.525 in the console what to do ?
but the orginal answer it should show is 5.025
rewrite the code and comment it below so i can understand more clearly
when i write same in the javascript it gives me the correct answer

Try something like this:
var lat = (parseFloat(document.getElementById('VL').dataset.value));
That's how to save in variable 'var' the document.getElementById('VL') values and make them float, so now it won't see it as a string and hopefully it will let you sum them and get the number you need.

How to display the slider value in html?

I have been recently working on a project which demonstrates the use of the arithmetic sequence. The user will use a slider to input the value for the starting term, which is t0; the difference, which is d; the number of terms, which is represented as n. However, I could not get the code to work. I used the solution in this post: HTML5 input type range show range value . A demo of my code down below:
var t0, difference, boxedNums, numOfTerms, redCircle, redTriangle, redRectangle, blueCircle, blueTriangle, blueRectangle;
function genTn() {
reset();
t0 = document.getElementById("t0").value;
difference = document.getElementById("d").value;
numOfTerms = document.getElementById("tn").value;
var tn;
document.getElementById('buildButton').style.display = 'none';
for (n = 0; n < numOfTerms; n++) {
tn = t0 * 1 + difference * n;
setTimeout(buildNextOne, 3000 * n, n, tn);
}
setTimeout(showButton, 3000 * numOfTerms);
document.getElementById("formulat0").innerHTML = t0;
document.getElementById("formulad").innerHTML = difference;
document.getElementById("formulan").innerHTML = numOfTerms;
}
function buildNextOne(n, tn) {
var insert = '<div class="col-sm-4 col-md-2 boxed center">'
insert += 't<sub>' + n + '</sub><br>'
insert += '<span class="tn">' + tn + '</span><br>'
insert += getPicsRepresentOfNumber(tn);
insert += '</div>'
document.getElementById("boxArea").innerHTML += insert;
var msg = new SpeechSynthesisUtterance(tn);
window.speechSynthesis.speak(msg);
}
function showButton() {
document.getElementById('buildButton').style.display = '';
}
function reset() {
document.getElementById("boxArea").innerHTML = "";
}
function getPicsRepresentOfNumber(number) {
var totalHund = 0,
totalTens = 0,
totalOnes = 0,
returnHtml = '';
totalHund = Math.abs(parseInt(number / 100));
var diffAfterRemovingHund = number % 100;
totalTens = Math.abs(parseInt(diffAfterRemovingHund / 10));
totalOnes = Math.abs(parseInt(diffAfterRemovingHund % 10));
for (var i = 0; i < totalHund; i++) {
returnHtml += number < 0 ? "<img src='imgs/negativeHundred.png'>&nbsp" : "<img src='imgs/hundred.png'>&nbsp";
if (i == 4) {
returnHtml += "&nbsp"
}
}
returnHtml += "<br>";
for (var i = 0; i < totalTens; i++) {
returnHtml += number < 0 ? "<img src='imgs/negativeTen.png'>&nbsp" : "<img src='imgs/ten.png'>&nbsp";
if (i == 4) {
returnHtml += "&nbsp";
}
}
returnHtml += "<br>";
for (var i = 0; i < totalOnes; i++) {
returnHtml += number < 0 ? "<img src='imgs/negativeOne.png'>&nbsp" : "<img src='imgs/one.png'>&nbsp";
if (i == 4) {
returnHtml += "&nbsp";
}
}
returnHtml += "<br>";
return returnHtml;
}
function updateT0Input(t0) {
document.getElementById("updatet0").value = t0;
}
function updateDInput(difference) {
document.getElementById("updated").value = difference;
}
function updateNInput(numOfTerms) {
document.getElementById("updaten").value = numOfTerms;
}
.center {
text-align: center;
}
#equation {
background-color: lightgreen;
text-align: center;
border-radius: 10%;
}
body {
background-color: lightblue;
}
#formula {
background-color: lightgreen;
}
.boxed {
border: 1px solid gray;
margin-top: 10px;
background-color: beige;
}
.tn {
font-size: 3em;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Assignment 10a2</title>
</head>
<body>
<div id="formula">
Formula: <br>
t<sub>n</sub> = <span id="formulat0">t<sub>0</sub></span> + <span id="formulad">d</span>*<span id='formulan'>n</span> <br>
<br>
t<sub>0</sub> = <span id="updatet0"></span>
<input type="range" min="-50" max="50" value="0" id="t0" class="slider" onchange="updateT0Input(this.value);">
<br>
d = <span id="updated"></span>
<input type="range" min="-50" max="50" value="0" id="d" class="slider" onchange="updateDInput(this.value);">
<br>
n = <span id="updaten"></span>
<input type="range" min="1" max="20" value="10" id="tn" class="slider" onchange="updateNInput(this.value);">
<br>
<button id="buildButton" style="display:''" type="button" class="btn btn-warning"
onclick="genTn()">Generate</button>
</div>
<br>
<div class="container">
<div class="row" id="boxArea">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src="10a2.js"></script>
</body>
I added the functions updateT0Input, updateDInput, and updateNInput:
function updateT0Input(t0) {
document.getElementById("updatet0").value = t0;
}
function updateDInput(difference) {
document.getElementById("updated").value = difference;
}
function updateNInput(numOfTerms) {
document.getElementById("updaten").value = numOfTerms;
}
And my html slidebars are here:
t<sub>0</sub> = <span id="updatet0"></span>
<input type="range" min="-50" max="50" value="0" id="t0" class="slider" onchange="updateT0Input(this.value);">
<br>
d = <span id="updated"></span>
<input type="range" min="-50" max="50" value="0" id="d" class="slider" onchange="updateDInput(this.value);">
<br>
n = <span id="updaten"></span>
<input type="range" min="1" max="20" value="10" id="tn" class="slider" onchange="updateNInput(this.value);">
Did I do something wrong?
Please do not mind the undisplayable images in the demo

JSFiddle with your code snippet: https://jsfiddle.net/u92ws7ce/1/
Here's your HTML with slightly modified class names:
t<sub>0</sub> = <span id="updatet0"></span>
<input type="range" min="-50" max="50" value="0" id="t0" class="slider1" onchange="updateT0Input(this.value);">
<p>Value: <span id="demo1"></span></p>
<br>
d = <span id="updated"></span>
<input type="range" min="-50" max="50" value="0" id="d" class="slider2" onchange="updateDInput(this.value);">
<p>Value: <span id="demo2"></span></p>
<br>
n = <span id="updaten"></span>
<input type="range" min="1" max="20" value="10" id="tn" class="slider3" onchange="updateNInput(this.value);">
<p>Value: <span id="demo3"></span></p>
And add this to your JS file:
var output1 = document.getElementById("demo1");
output1.innerHTML = slider1.value;
slider1.oninput = function() {
output1.innerHTML = this.value;
}
var slider2 = document.getElementById("d");
var output2 = document.getElementById("demo2");
output2.innerHTML = slider2.value;
slider2.oninput = function() {
output2.innerHTML = this.value;
}
var slider3 = document.getElementById("tn");
var output3 = document.getElementById("demo3");
output3.innerHTML = slider3.value;
slider3.oninput = function() {
output3.innerHTML = this.value;
}
Make sure you identify each slider with a unique class name and id. You'll want to refactor it to be programmatic and use functions to encapsulate repetitive logic.
Reference: https://www.w3schools.com/howto/howto_js_rangeslider.asp

Uncaught Reference Error - one function works the other doesn't

I've read a lot about uncaught reference errors here and think I have the idea down - when the script is trying to call a function or reference a variable that hasn't been initialized yet. However, I am uncertain how to fix this, and why in my case one function works and the other doesn't.
I have one JS file with two functions in it, and one HTML file with a form. The form calls function1 onSubmit, and that works fine. A radio button inside of the form calls function2 onClick, and that's when I get the error:
Uncaught ReferenceError: toggleGender is not defined onclick # forms.html:20
Why would my first function work and not the second? It seems to me like they are operating under the same premise.
function calculatePFT()
{
var userForm = document.getElementById('userValues');
var pullups = userForm.userPullups.value;
var crunches = userForm.userCrunches.value;
var runMinutes = userForm.userMinutes.value;
var runSeconds = userForm.userSeconds.value;
var runScore = 0;
if(runMinutes < 18) { runScore = 100; }
else
{
var minDiff = runMinutes - 18;
var minPoints = minDiff * 6;
var secPoints = Math.ceil(runSeconds/10);
runScore = 100 - (minPoints + secPoints);
}
var score = parseInt(pullups*5) + parseInt(crunches) + parseInt(runScore);
document.getElementById('scoreBox').innerHTML = "You scored " + pullups + " pullups and " + crunches + " crunches and a run time of " + runMinutes + " minutes " + runSeconds + " seconds. TOTAL SCORE: " + score;
}
function toggleGender(var gender)
{
alert("Inside");
var maleForm = document.getElementById('male');
var femaleForm = document.getElementById('female');
if(gender == "f")
{
alert("Female");
maleForm.style.display = 'none';
femaleForm.style.display = 'block';
}
else
{
alert("Male");
maleForm.style.display = 'block';
femaleForm.style.display = 'none';
}
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Javascript Testing</title>
<link rel="stylesheet" href="style.css" />
<script src="scripts.js"></script>
</head>
<body>
<section id="wrapper">
<h3>PFT Calculator</h3>
<form action="#" id="userValues" method="post" onSubmit="calculatePFT()">
<div id="gender">
<span class="maleFemale">Male <input type="radio" name="maleFemale" value="male" CHECKED onClick="toggleGender('m')" /></span>
<span class="maleFemale">Female <input type="radio" name="maleFemale" value="female" onClick="toggleGender('f')" /></span>
</div>
<div id="male">
<div class="scoreLine">
<div class="label">Pullups:</div>
<div class="entry"><input type="number" name="userPullups" min="0" max="20" default="18" class="scoreEntry" required /></div>
</div>
</div>
<div id="female">
<div class="scoreLine">
<div class="label">Hang:</div>
<div class="entry"><input type="number" name="userHang" min="0" max="150" default="70" class="scoreEntry" required /></div>
</div>
</div>
<div class="scoreLine">
<div class="label">Crunches:</div>
<div class="entry"><input type="number" name ="userCrunches" min="0" max="100" default="100" class="scoreEntry" required /></div>
</div>
<div class="scoreLine">
<div class="label">Run (Minutes):</div>
<div class="entry"><input type="number" name="userMinutes" min="0" max="100" default="19" class="scoreEntry" required /></div>
</div>
<div class="scoreLine">
<div class="label">Run (Seconds):</div>
<div class="entry"><input type="number" name="userSeconds" min="0" max="59" default="30" class="scoreEntry" required /></div>
</div>
<div style="text-align:center;"><input type="submit" value="Calculate Score!" id="submitButton" /></div>
</form>
<span id="scoreBox"></span>
</section>
</body>
</html>

function toggleGender(var gender)
You have a syntax error here. Argument names should not be prefixed by var. This causes the functional declaration to fail (hence why you get a reference error when you try to call it).
function calculatePFT()
{
var userForm = document.getElementById('userValues');
var pullups = userForm.userPullups.value;
var crunches = userForm.userCrunches.value;
var runMinutes = userForm.userMinutes.value;
var runSeconds = userForm.userSeconds.value;
var runScore = 0;
if(runMinutes < 18) { runScore = 100; }
else
{
var minDiff = runMinutes - 18;
var minPoints = minDiff * 6;
var secPoints = Math.ceil(runSeconds/10);
runScore = 100 - (minPoints + secPoints);
}
var score = parseInt(pullups*5) + parseInt(crunches) + parseInt(runScore);
document.getElementById('scoreBox').innerHTML = "You scored " + pullups + " pullups and " + crunches + " crunches and a run time of " + runMinutes + " minutes " + runSeconds + " seconds. TOTAL SCORE: " + score;
}
function toggleGender(gender)
{
alert("Inside");
var maleForm = document.getElementById('male');
var femaleForm = document.getElementById('female');
if(gender == "f")
{
alert("Female");
maleForm.style.display = 'none';
femaleForm.style.display = 'block';
}
else
{
alert("Male");
maleForm.style.display = 'block';
femaleForm.style.display = 'none';
}
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Javascript Testing</title>
<link rel="stylesheet" href="style.css" />
<script src="scripts.js"></script>
</head>
<body>
<section id="wrapper">
<h3>PFT Calculator</h3>
<form action="#" id="userValues" method="post" onSubmit="calculatePFT()">
<div id="gender">
<span class="maleFemale">Male <input type="radio" name="maleFemale" value="male" CHECKED onClick="toggleGender('m')" /></span>
<span class="maleFemale">Female <input type="radio" name="maleFemale" value="female" onClick="toggleGender('f')" /></span>
</div>
<div id="male">
<div class="scoreLine">
<div class="label">Pullups:</div>
<div class="entry"><input type="number" name="userPullups" min="0" max="20" default="18" class="scoreEntry" required /></div>
</div>
</div>
<div id="female">
<div class="scoreLine">
<div class="label">Hang:</div>
<div class="entry"><input type="number" name="userHang" min="0" max="150" default="70" class="scoreEntry" required /></div>
</div>
</div>
<div class="scoreLine">
<div class="label">Crunches:</div>
<div class="entry"><input type="number" name ="userCrunches" min="0" max="100" default="100" class="scoreEntry" required /></div>
</div>
<div class="scoreLine">
<div class="label">Run (Minutes):</div>
<div class="entry"><input type="number" name="userMinutes" min="0" max="100" default="19" class="scoreEntry" required /></div>
</div>
<div class="scoreLine">
<div class="label">Run (Seconds):</div>
<div class="entry"><input type="number" name="userSeconds" min="0" max="59" default="30" class="scoreEntry" required /></div>
</div>
<div style="text-align:center;"><input type="submit" value="Calculate Score!" id="submitButton" /></div>
</form>
<span id="scoreBox"></span>
</section>
</body>
</html>

create a counter that updates every second

I want to create a counter for my site, this is my cod,right now evry 1000 millisecond it increment 1 unit but i want that evry 1000 millisecond it increment todaycostsec ???
<html>
<script language="javascript">
sumcost=4000;
todaycost=500;
todaycostsec=(500)/86400;
var sum;
var Min;
Min=(sumcost-todaycost);
function incrementer() {
sum=(Min+todaycostsec);
document.time.heure.value=sum;
//document.time.result.value=sum;
}
function incrementer1() {
sum++;
//sum= Math.ceil(Min + ( todaycost* todaycostsec));
document.time.heure1.value=sum;
}
interv = setInterval("incrementer1()",1000);
</script>
<form name="time">
<input type="text" value="" name="heure" onclick="incrementer();"/>
<input type="text" value="" name="heure1" onclick="incrementer1();"/>
<div align="center">
<script language="JavaScript">
//document.write('<input style="FONT-WEIGHT: bold; bo ?rder: none; color:#CC0000 ; FONT-SIZE: 14pt; TEXT-ALIGN: center;" name=result size=30 value="incrementer()">');
</script>
</div>
</form>
</html>

Try
function incrementer1() {
sum += todaycostsec;
document.time.heure1.value=sum;
}

Develop Reference

JavaScript is the programming language of the Web.

Countdown Timer Unable to Work Properly In Chrome Extension Popup - javascript

Related

Range Slider made on JS and HTML

I get 4.5.525 when adding in html 4.5 + .525 = 5.025 in html [duplicate]

How to display the slider value in html?

Uncaught Reference Error - one function works the other doesn't

create a counter that updates every second

Categories

Resources