How to move two cars across the screen using JavaScript

How to move two cars across the screen using JavaScript - 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>

Related

why this code is not showing correct result ,however i change the value of the text box initial the result will still be 32 as if y=0

let y = document.getElementById("weathMeas").innerHTML;
function calc(y) {
var z;
z = (y * 1.8) + 32;
return z;
}
document.getElementById("demo").innerHTML = calc(y);
<head>
<section id="calcBody"> <span id="infomsg">Please enter current temperature :</span>
<p>
<input type="text" id="weathMeas" name="weather" value="58">
</p>
<input type="button" id="result" value="result!">
<p id="demo"></p>
</section>
</head>

Is this what you're looking for?
function calc() {
let y = document.getElementById("weathMeas").value;
let yInt = parseInt(y);
var z;
z = (yInt * 1.8) + 32;
document.getElementById("demo").innerHTML = z;
}
<head>
<section id="calcBody"> <span id="infomsg">Please enter current temperature :</span>
<p>
<input type="text" id="weathMeas" name="weather" value="58">
</p>
<input type="button" id="result" value="result!" onclick="calc()">
<p id="demo"></p>
</section>
</head>

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

Javascript Code to be embedded in HTML

I have a JS code to calculate the multiple of a number. I want to incorporate the same in my HTML file. So when I click the "Submit" button, it gives me the answer. Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta author="Shruti Paliwal">
<title>Project Euler Solutions</title>
<script language="javascript" type="text/javascript">
function multiples()
{
var i;
sum=0;
for(i=1;i<1000;i++)
{
if(i%3 === 0 || i%5 === 0)
{
sum+=i;
}
}
}
document.getElementById('sum').value = sum;
</script>
</head>
<body>
<h3>
<div id="header">
Project Euler
<sub>.net</sub>
</h3>
</div>
<br />
<br />
<p class="problem1" id="problem">
<b>
Multiples of 3 and 5
</b>
<div class="boundary" id="boundary">
<div class="content">
If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23.
<br />
Find the sum of all the multiples of 3 or 5 below 1000.
<br />
<br />
<form>
<input type="text" name="value">
<input type="button" onclick="sum()" value="Submit" />
</form>
</div>
</p>
</div>
</style>
</body>
</html>
Need help to display the output of this code on my webpage. The logic to calculate multiples is working fine on a JS console. However, not getting how to incorporate the 2!!

Change your code to:
<p class="problem1" id="problem">
<b>
Multiples of 3 and 5
</b>
<div class="boundary" id="boundary">
<div class="content">
If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23.
<br />
Find the sum of all the multiples of 3 or 5 below 1000.
<br />
<br />
<form>
<p>Enter number 1:</p><input type="text" id="txtNumber1">
<br />
<p>Enter number 2:</p><input type="text" id="txtNumber2">
<br />
<br />
<input type="button" onclick="multiples()" value="Submit" />
<input type="text" name="value" id="sum">
</form>
</div>
</div>
<script language="javascript" type="text/javascript">
function multiples() {
////Jquery
//var number1 = $("#txtNumber1").val();
//var number2 = $("#txtNumber2").val();
//Javascript
var number1 = document.getElementById('txtNumber1').value;
var number2 = document.getElementById('txtNumber2').value;
if (number1.trim() == '' || number2.trim() == '')
{
alert('please enter number1 and number2');
return false;
}
var i;
sum = 0;
for (i = 1; i < 1000; i++) {
if (i % number1 === 0 || i % number2 === 0) {
sum += i;
}
}
document.getElementById('sum').value = sum;
return false;
}
</script>

Javascript 101
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
<button onclick="myFunction()">Click me</button>
OR
function calculate() {
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
var result = document.getElementById('result');
var myResult = myBox1 * myBox2;
result.innerHTML = myResult;
}
<input id="box1" type="text" />
<input id="box2" type="text" />
<div id="result"></div>
<input type="submit" onclick="calculate()"/>

HTML Text Field Math / Displaying Answer in Text Field

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;
}

Develop Reference

JavaScript is the programming language of the Web.

How to move two cars across the screen using JavaScript - javascript

Related

why this code is not showing correct result ,however i change the value of the text box initial the result will still be 32 as if y=0

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

How to display the slider value in html?

Javascript Code to be embedded in HTML

HTML Text Field Math / Displaying Answer in Text Field

Categories

Resources