HTML Text Field Math / Displaying Answer in Text Field - javascript

I don't have much experience with HTML or javascript coding and I am trying to make a simple calculation app. This is what I have so far:
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {
float:left;
padding:5px 150px;
}
#h1 {
float:left;
padding:5px 150px;
}
#v1 {
float:left;
padding:5px 150px;
}
#p2 {
padding:5px 150px;
}
#h2 {
padding:5px 150px;
}
#v2 {
padding:5px 150px;
}
</style>
</head>
<body>
<h1><center><b>Bernoulli's Energy Balance</b></center></h1>
<center><h2>P<sub>1</sub> + ρ*g*h<sub>1</sub> + ρ*(<sup>V<sub>1</sub><sup>2</sup></sup>⁄<sub>2</sub>) = P<sub>2</sub> + ρ*g*h<sub>2</sub> + ρ*(<sup>V<sub>2</sub><sup>2</sup></sup>⁄<sub>2</sub>) + ρ*F</h2></center>
<form name="boxes" action="">
<div id="p1" name="p1">
P<sub>1</sub>:<input type="text" name="P1" size=3></div>
<div id="p2" name="p2" align="right">
P<sub>2</sub>:<input type="text" name="P2" size=3><br></div><br>
<div id="h1" name="h1">
h<sub>1</sub>:<input type-"text" name="h1" size=3></div>
<div id="h2" name="h2" align="right">
h<sub>2</sub>:<input type-"text" name="h2" size=3></div><br>
<div id="v1" name="v1">
V<sub>1</sub>:<input type-"text" name="V1" size=3></div>
<div id="v2" name="v2" align="right">
V<sub>2</sub>:<input type-"text" name="V2" size=3></div><br>
<div id="rho" name="rho" align="center">
ρ:<input type="text" name="rho" size=3></div><br>
<div id="F" name="F" align="center">
F:<input type="text" name="F" size=3></div><br>
<div id="g" name="g" align="center">
g:<input type="text" name="g" size=3 value="9.8"></div><br>
<input type="button" onclick="calculate();" value="Calculate">
</form>
<script type="text/javascript" language="javascript" charset="utf-8">
function isEmpty(id) {
var text = document,getElementById(id).value;
if (!text.match(/\S/)){
return true;
}
else{
return false;
}
}
function calculate(){
var p1 = parseInt(document.getElementById("p1").value);
var p2 = parseInt(document.getElementById("p2").value);
var h1 = parseInt(document.getElementById("h1").value);
var h2 = parseInt(document.getElementById("h2").vaule);
var v1 = parseInt(document.getElementById("v1").value);
var v2 = parseInt(document.getElementById("v2").value);
var rho = parseInt(document.getElementById("rho").value);
var F = parseInt(document.getElementById("F").value);
var g = parseInt(document.getElementById("g").value);
var Lside = p1+(rho*g*h1)+(rho*((v1^2)/2));
var Rside = p2+(rho*g*h2)+(rho*((v2^2)/2))+(rho*F);
var ans = 0;
if (isEmpty(p1)){
ans = Rside-(rho*((v1^2)/2))-(rho*g*h1);
document.getElementById("p1").value = ans.toString();
}
else if (isEmpty(h1)){
ans = (Rside-(rho*((v1^2)/2))-p1)/(rho*g);
document.getElementById("h1").value = ans.toString();
}
else if (isEmpty(v1)){
ans = (Rside-p1-(rho*g*h1))/rho;
ans = ans*2;
ans = Math.sqrt(ans);
document.getElementById("v1").value = ans.toString();
}
else if (isEmpty(p2)){
ans = Lside-(rho*((v2^2)/2))-(rho*g*h2)-(rho*F);
document.getElementById("p2").value = ans.toString();
}
else if (isEmpty(h2)){
ans = (Lside-(rho*((v2^2)/2))-(rho*F)-p2)/(rho*g);
document.getElementById("h2").value = ans.toString();
}
}
</script>
</body>
</html>
I am trying to do the calculations and have the answer displayed in a text box. If that cannot be done I have also tried to display the answer in a tag but that did not work either.
Here is what the code looks like so far: http://jsfiddle.net/fCXMt/238/
It is supposed to find which text field is left blank and then do the calculation to find the value by using the other values which will all be given.


Quickly went through your code, the id's assigned are assigned to the div's and not the input values themselves.You are getting the wrong id's as from what i can see.
var p1 = parseInt(document.getElementById("p1").value);
should be
var p1 = parseInt(document.getElementById("P1").value);//notice the capital.
I also see that some divs that contain the input have id's but not the input fields themselves.
On line 76 you have a typo
var text = document,getElementById(id).value;
it should be document.getElementById(id).value;


Your code is full of errors. This is what it looks like after correcting the errors.
Demo on Fiddle
(For some reason, the first six inputs are unclickable on the fiddle. So, to get the focus on those inputs, click on the left top corner of the Result window and press the Tab key.)
HTML:
<div class="container">
<h1><center><b>Bernoulli's Energy Balance</b></center></h1>
<center>
<h2>P<sub>1</sub> + ρ*g*h<sub>1</sub> + ρ*(<sup>V<sub>1</sub><sup>2</sup></sup>⁄<sub>2</sub>) = P<sub>2</sub> + ρ*g*h<sub>2</sub> + ρ*(<sup>V<sub>2</sub><sup>2</sup></sup>⁄<sub>2</sub>) + ρ*F</h2>
</center>
<br />
<div class="data">
<form>
<div class="left">P<sub>1</sub>:
<input id="p1" type="text" size="3" />
</div>
<div class="right">P<sub>2</sub>:
<input id="p2" type="text" size="3" />
</div>
<div class="left">h<sub>1</sub>:
<input id="h1" type="text" size="3" />
</div>
<div class="right">h<sub>2</sub>:
<input id="h2" type="text" size="3" />
</div>
<div class="left">V<sub>1</sub>:
<input id="v1" type="text" size="3" />
</div>
<div class="right">V<sub>2</sub>:
<input id="v2" type="text" size="3" />
</div>
<div class="center">ρ:
<input id="rho" type="text" size="3" />
</div>
<br />
<div class="center">F:
<input id="F" type="text" size="3" />
</div>
<br />
<div class="center">g:
<input id="g" type="text" size="3" value="9.8" />
</div>
<br />
<input id="btn" type="button" value="Calculate" />
</form>
</div>
</div>
JavaScript:
function calculate() {
var p1 = parseFloat(document.getElementById("p1").value, 10);
var p2 = parseFloat(document.getElementById("p2").value, 10);
var h1 = parseFloat(document.getElementById("h1").value, 10);
var h2 = parseFloat(document.getElementById("h2").vaule, 10);
var v1 = parseFloat(document.getElementById("v1").value, 10);
var v2 = parseFloat(document.getElementById("v2").value, 10);
var rho = parseFloat(document.getElementById("rho").value, 10);
var F = parseFloat(document.getElementById("F").value, 10);
var g = parseFloat(document.getElementById("g").value, 10);
var Lside = p1 + (rho * g * h1) + (rho * ((v1 ^ 2) / 2));
var Rside = p2 + (rho * g * h2) + (rho * ((v2 ^ 2) / 2)) + (rho * F);
var ans;
if (!p1) {
ans = Rside - (rho * ((v1 ^ 2) / 2)) - (rho * g * h1);
document.getElementById("p1").value = Math.round(ans * 100) / 100;
} else if (!h1) {
ans = (Rside - (rho * ((v1 ^ 2) / 2)) - p1) / (rho * g);
document.getElementById("h1").value = Math.round(ans * 100) / 100;
} else if (!v1) {
ans = (Rside - p1 - (rho * g * h1)) / rho;
ans = ans * 2;
ans = Math.sqrt(ans);
document.getElementById("v1").value = Math.round(ans * 100) / 100;
} else if (!p2) {
ans = Lside - (rho * ((v2 ^ 2) / 2)) - (rho * g * h2) - (rho * F);
document.getElementById("p2").value = Math.round(ans * 100) / 100;
} else if (!h2) {
ans = (Lside - (rho * ((v2 ^ 2) / 2)) - (rho * F) - p2) / (rho * g);
document.getElementById('h2').value = Math.round(ans * 100) / 100;
}
}
var btn = document.getElementById('btn');
btn.onclick = calculate;
CSS:
.container {
text-align: center;
}
.data {
width: 300px;
margin-left: auto;
margin-right: auto;
}
.left {
text-align: left;
}
.right {
position: relative;
top: -20px;
text-align: right;
}

Related

How to move two cars across the screen using JavaScript

Currently I have two pages the CarRace.html the second is JavaScript.js. CarRace contains three buttons and two images (each is a picture of a car). When the StartRace button is clicked, a random number is to be generated for each car and is to repeat every second. The two numbers generated is the distance each image should move. Currently nothing moves.
CarRace Code:
var timer;
var ArandomNumber;
var BrandonNumber;
var x = 0
var q = 0
function GatherData() {
ArandomNumber = GetRandomNumA();
BrandonNumber = GetRandomNumB();
var thedivtop = document.getElementById("Move1");
x += 10;
thedivtop.style.left = x + 'px';
var thedivbottom = document.getElementById("Move2");
q += 10;
thedivbottom.style.left = q + 'px';
}
function StartRace() {
timer = setInterval(GatherData, 1000);
}
function GetRandomNumA() {
var x = Math.random();
x = Math.random() + 55;
return x;
}
function GetRandomNumB() {
var q = Math.random();
q = Math.random() + 55;
return q;
}
<title>Race</title>
<script src="JavaScript.js"></script>
<style>
.moveable {
position: absolute;
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<b>First to 800 pixels wins!</b>
<br>
<br>
<b>Both cars start at 0 pixels.</b>
<br>
<br>
<input id="Button1" type="button" value="Start Race" onclick="StartRace()" />
<input id="Button1" type="button" value="Pause Race" onclick="PauseRace()" />
<input id="Button1" type="button" value="Reset Cars" onclick="ResetRace()" />
<br>
<br>
<div id="Move1">
<img id="Car1" class="moveable" src="delorean.jpeg" />
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="Move2">
<img id="Car2" class="moveable" src="duster.jpg" />
</div>
</body>

Your JavaScript code does change the cars' left property, however you need to modify your CSS in order to allow the left property take effect.
After adding relative position to the cars elements, they move as expected.
var timer;
var ArandomNumber;
var BrandonNumber;
var x = 0
var q = 0
function GatherData() {
ArandomNumber = GetRandomNumA();
BrandonNumber = GetRandomNumB();
var thedivtop = document.getElementById("Move1");
x += 10;
thedivtop.style.left = x + 'px';
var thedivbottom = document.getElementById("Move2");
q += 10;
thedivbottom.style.left = q + 'px';
}
function StartRace() {
timer = setInterval(GatherData, 1000);
}
function GetRandomNumA() {
var x = Math.random();
x = Math.random() + 55;
return x;
}
function GetRandomNumB() {
var q = Math.random();
q = Math.random() + 55;
return q;
}
#Move1, #Move2 {
position: relative;
}
<title>Race</title>
<script src="JavaScript.js"></script>
<style>
.moveable {
position: absolute;
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<b>First to 800 pixels wins!</b>
<br>
<br>
<b>Both cars start at 0 pixels.</b>
<br>
<br>
<input id="Button1" type="button" value="Start Race" onclick="StartRace()" />
<input id="Button1" type="button" value="Pause Race" onclick="PauseRace()" />
<input id="Button1" type="button" value="Reset Cars" onclick="ResetRace()" />
<br>
<br>
<div id="Move1">
<img id="Car1" class="moveable" src="delorean.jpeg" />
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="Move2">
<img id="Car2" class="moveable" src="duster.jpg" />
</div>
</body>

how to add two numbers and display result in heading in javascript

i need to take two numbers from the user input and add them, then display it in a heading like "the total is () " and other function to display the average of them. i tried this code but when i click on the button nothing happen and no result shows to me. can you please help me figure the error
var count = 0;
function start() {
var i = document.getElementById("computeAvg");
i.addEventListener("click", add, false);
}
function add() {
var a, b, c;
a = Number(document.getElementById("quiz1").value);
b = Number(document.getElementById("quiz2").value);
c = a + b;
document.getElementById("sTotal").value = c;
}
function Avg() {
count = count + 1
var d = document.getElementById("sTotal");
var A = x1 + x2 / count;
var av = document.getElementById("cAvg");
av.innerHTML = A;
document.getElementById("myimg").onclick = Avg() {
document.getElementById("myimg").style.visibility = "visible";
}
}
window.onload = start;
<html>
<head>
<meta charset="utf-8">
<title>Quiz Grade Calculator</title>
</head>
<body>
<h2>Quiz Grade Calculator</h2>
<div style="width:45%;">
<img id="myimg" src="check.png" style="float:right; visibility:hidden;">
<div>QUIZ1 <input type="text" size="2" id="quiz1" value="0" onchange="Add()" /> / 5</div>
<div>QUIZ2 <input type="text" size="2" id="quiz2" value="0" onchange="Add()" /> / 5</div>
</div>
<h3>Student Total: <span id="sTotal">0</span></h3>
<input type="button" id="computeAvg" value="Add Quiz" onclick="Add()"> CLASS AVERAGE <input type="text" size="5" id="cAvg" />
</body>
</html>

Problems that I could find
You used the format .onlick = namedFunction() { ... }, which is incorrect. Replace the function name with the keyword function.
Your HTML calls the function Add() with a capital letter, but the function is defined as add().
You try to change the value of a span element, but only input elements can have values. Instead, you need the innerText property.
Other edits I've made
The function Avg() is never used, so I put it into a javascript comment.
When trying to find errors, it's always good to minimise code, so I've removed tags such as body, html or head which are unnecessary to reproduce the problem.
For the purpose of creating a code snippet, I've separated out HTML and javascript. However, I would recommend doing this on a real website as well.
Working code snippet
var count = 0;
function start() {
var i = document.getElementById("computeAvg");
i.addEventListener("click", add, false);
}
function add() {
var a, b, c;
a = Number(document.getElementById("quiz1").value);
b = Number(document.getElementById("quiz2").value);
c = a + b;
document.getElementById("sTotal").innerText = c;
}
/*function Avg() {
count = count + 1
var d = document.getElementById("sTotal");
var A = x1 + x2 / count;
var av = document.getElementById("cAvg");
av.innerHTML = A;
document.getElementById("myimg").onclick = function() {
document.getElementById("myimg").style.visibility = "visible";
}
}*/
window.onload = start;
<h2>Quiz Grade Calculator</h2>
<div style="width:45%;">
<img id="myimg" src="check.png" style="float:right; visibility:hidden;">
<div>QUIZ1 <input type="text" size="2" id="quiz1" value="0" onchange="add()" /> / 5</div>
<div>QUIZ2 <input type="text" size="2" id="quiz2" value="0" onchange="add()" /> / 5</div>
</div>
<h3>Student Total: <span id="sTotal">0</span></h3>
<input type="button" id="computeAvg" value="Add Quiz" onclick="add()"> CLASS AVERAGE <input type="text" size="5" id="cAvg" />

There are a numbers of mistakes, the mains of are:
in function add you should use document.getElementById("sTotal").innerHTML = c; instead value due to span does not have value.
an Add() and add() different names, while add is defined Add is not.
in document.getElementById("myimg").onclick = Avg() {, you forget about function, that cause syntax error.
var count = 0;
function start() {
var i = document.getElementById("computeAvg");
i.addEventListener("click", add, false);
}
function add() {
var a, b, c;
debugger
a = Number(document.getElementById("quiz1").value);
b = Number(document.getElementById("quiz2").value);
c = a + b;
document.getElementById("sTotal").innerHTML = c;
}
function Avg() {
count = count + 1
var d = document.getElementById("sTotal");
var A = x1 + x2 / count;
var av = document.getElementById("cAvg");
av.innerHTML = A;
document.getElementById("myimg").onclick = function Avg() {
document.getElementById("myimg").style.visibility = "visible";
}
}
window.onload = start;
<h2>Quiz Grade Calculator</h2>
<div style="width:45%;">
<img id="myimg" src="check.png" style="float:right; visibility:hidden;">
<div>QUIZ1 <input type="text" size="2" id="quiz1" value="0" onchange="add()" /> / 5</div>
<div>QUIZ2 <input type="text" size="2" id="quiz2" value="0" onchange="add()" /> / 5</div>
</div>
<h3>Student Total: <span id="sTotal">0</span></h3>
<input type="button" id="computeAvg" value="Add Quiz" onclick="add()"> CLASS AVERAGE <input type="text" size="5" id="cAvg" />

<html>
<head>
<meta charset = "utf-8">
<title>Quiz Grade Calculator</title>
<script type="text/javascript">
var count =0;
function start()
{
//var q1 = document.getElementById("quiz1");
//q1.addEventListener("click",Add,false);
// var q2 = document.getElementById("quiz2");
// q2.addEventListener("click",Add,false);
var i = document.getElementById("computeAvg");
i.addEventListener("click", add, false);
}
function add() {
var a = document.getElementById("quiz1").value;
var b = document.getElementById("quiz2").value;
var c = parseInt(a) + parseInt(b);
document.getElementById("sTotal").innerHTML = c;
Avg();
}
function Avg()
{
// since the number of count is predifine
count = 2;
document.getElementById("cAvg").value = (parseInt(document.getElementById("quiz1").value) + parseInt(document.getElementById("quiz2").value)) / count;
document.getElementById("myimg").onclick = Avg();
document.getElementById("myimg").style.visibility = "visible";
}
window.onload=start;
</script>
</head>
<body>
<h2>Quiz Grade Calculator</h2>
<div style="width:45%;">
<img id="myimg" src="check.png" style="float:right; visibility:hidden;">
<div>QUIZ1 <input type="text" size="2" id="quiz1" value="0" onchange="Add()"/> / 5</div>
<div>QUIZ2 <input type="text" size="2" id="quiz2" value="0" onchange="Add()"/> / 5</div>
</div>
<h3>Student Total: <span id="sTotal">0</span></h3>
<input type = "button" id="computeAvg" value = "Add Quiz" onclick="Add()">
CLASS AVERAGE <input type="text" size="5" id="cAvg"/>
</body>

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

Why Do I keep getting NaN?

These are my codes. I don't know why I keep getting NaN? Please help me on this one. My textbox value comes from a dropdown that whatever the user chooses, a corresponding value will appear on the textbox that's why i used value="" I don't know if its the part that I got wrong. Please tell me how to deal with this NaN.
JS
function subtotal(){
var as = $("#as").val();
var txt1 = $('#sff').val();
var txt2 = $('#osf').val();
var d = 0;
var e = 0;
var f = 0;
var g = 0;
var a = parseFloat(as, 10);
var b = parseFloat(txt1, 10);
var c = parseFloat(txt2, 10);
if ($('#cbx3').is(":checked")) {
d = parseFloat($("#cbx3").val(), 10);
}
if ($('#cbx4').is(":checked")) {
e = parseFloat($("#cbx4").val(), 10);
}
if ($('#cbx5').is(":checked")) {
f = parseFloat($("#cbx5").val(), 10);
}
if ($('#cbx6').is(":checked")) {
g = parseFloat($("#cbx6").val(), 10);
}
var total = a + b + c + d + e + f + g;
$('#st').val(total.toFixed(2));
}
function grandtotal(){
var x = document.getElementById("st").value;
var y = document.getElementById("shppng").value;
var sum = parseFloat(x, 10)+ parseFloat(y, 10);
$("#gt").val(sum.toFixed(2));
HTML
<input type="text" id="sff" placeholder="$0.00" value="" style="float:left;"/>
<input type="text" id="osf" placeholder="$0.00" value="" style="float:left;"/>
<select id="as" style="margin: 3px 0 0 55px; width:48%; position: absolute; float: left;">
<option value="99.00">$99.00/</option>
<option value="178.20">$178.20</option>
<option value="241.56">$241.56</option>
<option value="292.24">$292.24</option>
<option value="332.80">$332.80</option>
</select>
<input type="checkbox" id="cbx4" value="69.00"/>
<input type="checkbox" id="cbx5" value="35.00"/>
input type="checkbox" id="cbx6" value="39.00"/>

Specify default value.
<input type="text" id="sff" placeholder="$0.00" value="0" style="float:left;"/>
<input type="text" id="osf" placeholder="$0.00" value="0" style="float:left;"/>

The value of a, b or c can be blank so
function subtotal() {
var as = $("#as").val();
var txt1 = $('#sff').val();
var txt2 = $('#osf').val();
var d = 0;
var e = 0;
var f = 0;
var g = 0;
var a = parseFloat(as, 10) || 0;
var b = parseFloat(txt1, 10) || 0;
var c = parseFloat(txt2, 10) || 0;
if ($('#cbx3').is(":checked")) {
d = parseFloat($("#cbx3").val(), 10);
}
if ($('#cbx4').is(":checked")) {
e = parseFloat($("#cbx4").val(), 10);
}
if ($('#cbx5').is(":checked")) {
f = parseFloat($("#cbx5").val(), 10);
}
if ($('#cbx6').is(":checked")) {
g = parseFloat($("#cbx6").val(), 10);
}
var total = a + b + c + d + e + f + g;
$('#st').val(total.toFixed(2));
}
function grandtotal() {
var x = document.getElementById("st").value;
var y = document.getElementById("shppng").value;
var sum = parseFloat(x, 10) + parseFloat(y, 10);
$("#gt").val(sum.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="sff" placeholder="$0.00" value="" style="float:left;" />
<input type="text" id="osf" placeholder="$0.00" value="" style="float:left;" />
<select id="as">
<option value="99.00">$99.00/</option>
<option value="178.20">$178.20</option>
<option value="241.56">$241.56</option>
<option value="292.24">$292.24</option>
<option value="332.80">$332.80</option>
</select>
<input type="checkbox" id="cbx4" value="69.00" />
<input type="checkbox" id="cbx5" value="35.00" />
<input type="checkbox" id="cbx6" value="39.00" />
<br />
<input id="st" />
<input id="gt" />
<br />
<input type="button" value="Total" onclick="subtotal(); grandtotal();" />

Having issues with Javascript dice game

I'm trying to get one button to fire two functions. It's a basic dice based game: the player die on top works fine, but the computer die doesn't give a value.
function Welcome()
{
alert("Welcome " + document.getElementById("fname").value + "!");
}
function oldEnough(age)
{
if (age< 18)
{alert("UNDER 18 LEAVE NOW");
}
}
//player dice roll//
function rollDice() {
var die1 = document.getElementById("die1");
var die2 = document.getElementById("die2");
var status = document.getElementById("status");
//random number between 1 and 6(whole number)//
var d1 = Math.floor(Math.random() * 6) + 1;
var d2 = Math.floor(Math.random() * 6) + 1;
var diceTotal = d1 + d2;
//shows the random number value//
die1.innerHTML = d1;
die2.innerHTML = d2;
status.innerHTML = "You Rolled "+diceTotal+".";
if (d1 == d2){
status.innerHTML +=" Doubles! Roll Again ";
}
}
//computer dice roll//
function compDice() {
var die3 = document.getElementById("die3")
var die4 = document.getElementById("die4")
var status2 = document.getElementById("status2")
var d3 = Math.floor(Math.random() *6) +1;
var d4 = Math.floor(Math.random() * 6) +1;
var diceTotal = d3 + d4;
die3.innerHTML = d3;
die4.innerHTML = d4;
status2.innerHTML = "Computer Rolled "+diceTotal+".";
}
div.dice{
float:left;
width:32px:
background:#D6D6D6;
border:#999 1px solid;
padding:10px;
font-size:24px;
text-align:center;
margin:5px;
}
div.die{
float:left;
width:32px:
background:#D6D6D6;
border:#999 1px solid;
padding:10px;
font-size:24px;
text-align:center;
margin:5px;
}
<form action="#" method="get">
<p>
Player Name:
<input id="fname" name="fname" type="text" size="20" maxlength="20" onblur="Welcome()" />
</p>
Age:
<input id="age" name="age" id="age" type="text" size="3" maxlength="3" onBlur="oldEnough(this.value)"/>
</p>
<div id="die1" class="dice">0</div>
<div id="die2" class="dice">0</div>
<button onclick="rollDice()";"compDice()">Roll Dice</button>
<h2 id="status" style="clear:left;"></h2>
<div id="die3" class="die">0</div>
<div id="die4" class="die">0</div>
<h2 id="status2" style="clear:right;"></h2>

Change this:
<button onclick="rollDice()";"compDice()">Roll Dice</button>
to:
<button onclick="rollDice();compDice()">Roll Dice</button>

Categories

Resources