Hypotenuse multiplied with multiple numeric values - javascript

simple numerical code to compute the hypotenuse with the numeric value, i dont know how to decpiher the hypotenuse code in Javascript language" hypo = the square_root of ( sidea squared plus sideb squared)", when i go to my webpage it just shows up blank...what am i missing please inform me on what it was thanks
<html>
<head>
<title> Quadratic</title>
<script type="text/javascript">
function Calculate() {
var a = document.getElementById("aBox").value;
var b = document.getElementById("bBox").value;
var c = document.getElementById("cBox").value;
var x = document.getElementById("xBox").value;
var y = 0;
document.getElementById('outputDiv').innerHTML= 'result y = : 'y = ax2 + bx + c;">
}
</head>
<body>
<h2>Quadratic</h2>
<p>
a: <input type="text" id="aBox" value="2">
<br>
b: <input type="text" id="bBox" value="3">
<br>
c: <input type="text" id="cBox" value="4">
<br>
x: <input type="text" id="xBox" value="5">
<br>
result y = : <input type="text" id="yBox" value="0">
</p>
<div id="outputDiv">
<input type="button" value="Calculate quadratic" onclick="Calculate();">
</div>
<hr>
</script>
</body>
</html>

You need to close the script tag in the right place
}
</script>
</head>
<body>
then your page will at least display
then you need to fix this
.innerHTML= 'result y = : 'y = ax2 + bx + c;">

Try this fiddle. http://jsfiddle.net/harendra/CpBZu/
This fixes your calculate function to calculate hypotenuse of square. You can do same for other squares as well.
function Calculate() {
var a = parseInt(document.getElementById("aBox").value);
var b = parseInt(document.getElementById("bBox").value);
var c = parseInt(document.getElementById("cBox").value);
var x = parseInt(document.getElementById("xBox").value);
var y = Math.sqrt(a*a+a*a);
document.getElementById('yBox').value=y
//document.getElementById('outputDiv').innerHTML= 'result y = : 'y = ax2 + bx + c";
}

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>

What am I missing in my JavaScript code?

I'm new to JavaScript and I’m having issues trying to create a drop down list unit converter. The project calls for the code to convert miles to feet, Celsius to Fahrenheit and pounds to grams. The issue is when I enter the values the output is way off.
No matter what number I enter or unit I select I get the same result of 14514.944, instead of the appropriate (5280 feet, 33.8°, 453.592g, etc.). If I double click the submit button I get 62573043513.9154, triple click 269748534086686000, etc.
I know I’m missing something in the convert_unit function, but I’m not sure what. I’ve tried adding and removing various code and nothing is working.
var numInput = document.getElementById("numInput");
var numInput = document.getElementById("numOutput");
var feet = document.getElementById("feet");
var fahrenheit = document.getElementById("fahrenheit");
var grams = document.getElementById("grams");
function convert_unit() {
numOutput.value=(5280*numInput.value);
var x = document.getElementById("feet").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
numOutput.value=(1.8*numInput.value)+32
var x = document.getElementById("fahrenheit").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
numOutput.value=(453.592*numInput.value)
var x = document.getElementById("grams").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
}
<form>
<fieldset>
<label id="enter">Numeric Value</label>
<p>
<input type="number" placeholder="Enter Value" name=" " value=" " id="numInput" />
</p>
</fieldset>
<fieldset><label>Conversion Menu</label>
<p>
<select id="" name="" size="3">
<option id="feet" name="Miles to Feet">Miles to Feet</option>
<option id="fahrenheit" name="Celcius to Fahrenheit">Celcius to Fahrenheit</option>
<option id="grams" name="Pounds to Grams">Pounds to Grams</option>
</select>
</p>
</fieldset>
<fieldset>
<button type="button" id="mybutton" value=" " onClick="convert_unit()";>Convert</button>
</fieldset>
<fieldset><label id="results">Results</label>
<p>
<input type="number" placeholder="Results" name="to_unit" id="numOutput" readonly /></p>
</fieldset>
</form>
Both of your variables are named numInput:
var numInput = document.getElementById("numInput");
var numInput = document.getElementById("numOutput");
I'm guessing your second one should be numOutput. Also, there's no need to redefine these variables in JS unless you want to make it explicitly known what they are. HTML elements with IDs are already available in the global scope based on their ID name (with some caveats). In this case you could simply use numInput and numOutput throughout your program and it would still work even without these two lines.
i found 2 problems in your code.
The first is that in line 4 of the script, you overwrite the input of variable "numInput" with "numOutput" element. (Rename to 'numOutput')
The second problem is that, when script is loaded on page, the elements is not yet instanced. To solve that you can put the import tag right before </body> or add variables definition inside the function.
PS: Don't forget to use semicolons after every statement;
Jah Bless =)
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<fieldset>
<label id="enter">Pounds to Grams</label>
<p><input placeholder="Enter Value" name=" " value=" " id="numInput" type="number"></p>
</fieldset>
<fieldset>
<label>Conversion Menu</label>
<p>
<select id="" name="" size="3">
<option id="feet" name="Miles to Feet">Miles to Feet</option>
<option id="fahrenheit" name="Celcius to Fahrenheit">Celcius to Fahrenheit</option>
<option id="grams" name="Pounds to Grams">Pounds to Grams</option>
</select>
</p>
</fieldset>
<fieldset>
<button type="button" id="mybutton" value=" " onclick="convert_unit()" ;="">Convert</button>
</fieldset>
<fieldset>
<label id="results">Pounds to Grams</label>
<p><input placeholder="Results" name="to_unit" id="numOutput" readonly="" type="number"></p>
</fieldset>
</form>
<script src="script.js"></script>
</body>
</html>
script.js
function convert_unit() {
var numInput = document.getElementById('numInput');
var numOutput = document.getElementById('numOutput');
var feet = document.getElementById("feet");
var fahrenheit = document.getElementById("fahrenheit");
var grams = document.getElementById("grams");
numOutput.value=(5280*numInput.value);
var x = document.getElementById("feet").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
numOutput.value=(1.8*numInput.value)+32;
var x = document.getElementById("fahrenheit").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
numOutput.value=(453.592*numInput.value);
var x = document.getElementById("grams").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
}
Your code corrected, customized and working perfectly!
var numInput = document.getElementById("numInput");
var numOutput = document.getElementById("numOutput");
var feet = document.getElementById("feet");
var fahrenheit = document.getElementById("fahrenheit");
var grams = document.getElementById("grams");
function convert_unit() {
if(numInput.value === "") {
if(confirm("No value inputed to convert! Consider default 1 unit?")) {
numInput.value = 1;
}
}
if(getSelectedUnitToConvert("conversion_type") == null) {
if(confirm("No conversion unit selected! Consider default Miles to Feet?")) {
document.getElementById("conversion_type").selectedIndex = 0;
}
}
if(getSelectedUnitToConvert("conversion_type") == "Miles to Feet") {
numOutput.value=numInput.value;
numOutput2.value=(5280*numInput.value);
var x = document.getElementById("feet").label;
document.getElementById("result1").innerHTML = "Miles";
document.getElementById("result2").innerHTML = "Feet";
} else if(getSelectedUnitToConvert("conversion_type") == "Celcius to Fahrenheit") {
numOutput.value=numInput.value;
numOutput2.value=(1.8*numInput.value)+32;
var x = document.getElementById("fahrenheit").label;
document.getElementById("result1").innerHTML = "Celcius";
document.getElementById("result2").innerHTML = "Fahrenheit";
} else if(getSelectedUnitToConvert("conversion_type") == "Pounds to Grams") {
numOutput.value=numInput.value;
numOutput2.value=(453.592*numInput.value);
var x = document.getElementById("grams").label;
document.getElementById("result1").innerHTML = "Pounds";
document.getElementById("result2").innerHTML = "Grams";
}
}
function getSelectedUnitToConvert(elementId) {
var elt = document.getElementById(elementId);
if (elt.selectedIndex == -1) {
return null;
}
return elt.options[elt.selectedIndex].text;
}
div {
margin: 5px;
}
<form>
<fieldset>
<label id="enter">Value to Convert</label>
<p><input type="number" placeholder="Enter Value" value="" id="numInput" /></p>
</fieldset>
<fieldset><label>Units for Conversion</label>
<p><select id="conversion_type" size="3">
<option id="feet" name="Miles to Feet">Miles to Feet</option>
<option id="fahrenheit" name="Celcius to Fahrenheit">Celcius to Fahrenheit</option>
<option id="grams" name="Pounds to Grams">Pounds to Grams</option>
</select></p>
</fieldset>
<fieldset>
<button type="button" id="mybutton" value="" onclick="convert_unit();">Convert</button>
</fieldset>
<fieldset><label id="results">Conversion Result:</label>
<p>
<div>
<input placeholder="Original Value" name="to_unit" id="numOutput" readonly />
<label id="result1"></label>
</div>
<div>
<input placeholder="Conversion Result" name="to_unit2" id="numOutput2" readonly />
<label id="result2"></label>
</div>
</p>
</fieldset>
</form>

HTML does not run function on click

I'm trying to use the distance formula to find the difference between two castle on a game. The game stores the castle coordinates in the following format
"l+k://coordinates?16321,16520&146" the coordinates of this castle would be 16321 & 16520. I have written a function to extract this information from two castle links and then use the distance formula to return the answer. However for some reason when this function is called in the website it does not return the expected result. Does anyone know why this might be happening. Please find my code below. I have also attached a JSFiddle.
https://jsfiddle.net/ajdxetod/
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Lords & Knights - Distance Calculator</title>
<script type="text/javascript" src="distanceScript.js"></script>
</head>
<body>
<h1 class="heading">Distance Calculator</h1>
<div>
<fieldset>
<legend>Castle Link One</legend>
<input type="text" id="castle_one">
</fieldset>
</div>
<div>
<fieldset>
<legend>Castle Link Two</legend>
<input type="text" id="castle_two">
</fieldset>
</div>
<div class="map_of_areadiv">
<fieldset>
<legend>Is Map Of Area Researched</legend>
<input type="checkbox" id="moa_checkbox" checked="true"><label for="moa_checkbox">Is "Map Of Area Researched in the Libary?</label>
</fieldset>
</div>
<div class="calculate_button">
<button id="calculate" onclick="distanceCastles()">Calculate Distance</button>
</div>
<div class="distance_output">
<fieldset id="castle_distance">
<legend>Distance (in fields)</legend>
<input type="text" id="output" placeholder="Click the Calculate Distance Button">
</fieldset>
<textarea id="troop_times"></textarea>
</div>
</body>
distanceScript.js
var castleone;
var castletwo;
var x1;
var x2;
var y1;
var y2;
var distance = 0;
function distanceCastles() {
castleone = document.getElementById("castle_one") ;
castletwo = document.getElementById("castle_two") ;
if (typeof castleone === "string" && castleone.length === 33) {
x1 = castleone.substring(18, 23);
y1 = castleone.substring(24, 29);
x2 = castletwo.substring(18, 23);
y2 = castletwo.substring(24, 29);
distance = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
document.getElementById("output").innerHTML = distance;
}
else if (typeof castleone !== "string" || castleone.length !== 33) {
document.getElementById("troop_times").innerHTML = "Error: You have not entered valid castle links";
}
else {
document.getElementById("troop_times").innerHTML = "Error: You have not entered valid castle links";
}
}
You are declaring a variable
var distance = 0;
And then you create a function with the same name
function distance () {
// code...
}
and you wonder why you get an error. Rename either.
Some issues
As what first answer stated the distance was declared as a variable first
You are comparing an html object with a string..You don't need to do this (See how I attempted it)
You are trying to insert out message without using using the property innerHTML OR textContent..
You can get the value of each input distance using .value property of input box
See snippet below
<!DOCTYPE html>
<html>
<head>
<title>Lords & Knights - Distance Calculator</title>
<script type="text/javascript" src="distanceScript.js"></script>
</head>
<body>
<script>
var castleone;
var castletwo;
var x1;
var x2;
var y1;
var y2;
function distance() {
castleone = document.getElementById("castle_one");
castletwo = document.getElementById("castle_two");
if (castleone.value.length === 33) {
x1 = castleone.value.substring(18, 23);
y1 = castleone.value.substring(24, 29);
x2 = castletwo.value.substring(18, 23);
y2 = castletwo.value.substring(24, 29);
distance = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
console.log(distance);
document.getElementById("output").value = distance;
} else if (castleone.value.length !== 33) {
document.getElementById("troop_times").innerHTML = "Error: You have not entered valid castle links";
} else {
document.getElementById("troop_times").innerHTML = "Error: You have not entered valid castle links";
}
}
</script>
<h1 class="heading">Distance Calculator</h1>
<div>
<fieldset>
<legend>Castle Link One</legend>
<input type="text" id="castle_one">
</fieldset>
</div>
<div>
<fieldset>
<legend>Castle Link Two</legend>
<input type="text" id="castle_two">
</fieldset>
</div>
<div class="map_of_areadiv">
<fieldset>
<legend>Is Map Of Area Researched</legend>
<input type="checkbox" id="moa_checkbox" checked="true">
<label for="moa_checkbox">Is "Map Of Area Researched in the Libary?</label>
</fieldset>
</div>
<div class="calculate_button">
<button id="calculate" onclick="distance()">Calculate Distance</button>
</div>
<div class="distance_output">
<fieldset id="castle_distance">
<legend>Distance (in fields)</legend>
<input type="text" id="output" placehodler="Click the Calculate Distance Button">
</fieldset>
<textarea id="troop_times"></textarea>
</div>
</body>
</html>

Failure to calculate the total monthly payment for a car loan. What's going wrong?

Updated code. calculate() still not working. The monthly payment amount is ultimately not being passed to the "total" id box. Does anyone see what the underlying problem is here? My syntax seems to be correct, I believe there may be a problem with my specification of where each variable is applied in the code.
I am having problems getting the function calculate() to pass the correct result in "total." Any possible solutions? The action of clicking the calculate button should display the total, but is displaying nothing at all, as if the button does not activate the calculate function at all.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate() {
var P = document.getElementById("price").value;
var D = document.getElementById("DP").value;
var R = document.getElementById("R").value;
var N = document.getElementById("N").value;
var i = (R / 1200);
var n = (N * 12);
var m = ((P - D) * i * Math.pow(1 + i,n)) / (Math.pow(1 + i,n) - 1);
var result = document.getElementById('total');
result.value = m;}
</script>
</head>
<div align="center">
<hr>
<form name id="Main">
<input type="number" id="price" placeholder="Price of the Car"/>
<br>
<br>
<input type="number" id="DP" placeholder="Down Payment"/>
<br>
<br>
<input type="number" id="R" placeholder="Annual % Rate"/>
<br>
<br>
<input type="number" id="N" placeholder="# of Years Loaned"/>
<br>
<br>
<input type="button" id="calculate" value="Calculate" onclick="javascript:calculate();"/>
<br>
<br>
<input type="number" id="total" placeholder="Total Cost..." readonly=""/>
<br>
<br>
<input type="reset" value="Reset">
</form>
<hr>
</div>
</html>
Use Math.pow() function instead. The ^ operator is not for mathematical power operations (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow).
Also, It's result.value = m, not the other way around :)
Also 2: R and M seem undefined to me, you have to initialize those variables with something, like you did with P and D.
Also 3: use chrome dev tools or anything like that. It will make your life much easier. Remember, javascript doesn't mean "no IDE" :D
Unfortunately, your original code will never work, as it has too many errors.
Here is the corrected fiddle for you, please, have a look:
http://jsfiddle.net/q330fqw8/
function calculate() {
var P = document.getElementById("price").value;
var D = document.getElementById("DP").value;
var R = document.getElementById("R").value;
var N = document.getElementById("N").value;
var i = (R / 1200);
var n = (N * 12);
var m = ((P - D) * i * Math.pow(1 + i,n)) / (Math.pow(1 + i,n) - 1);
var result = document.getElementById('total');
result.value = m;
}
I removed id="calculate" in HTML, because of this: Why JS function name conflicts with element ID?
In Javascript, the 4 variables P,D,R,N should be set properly. Finally, this m.value = result; -> result.value = m;
but I guess, you've already corrected some errors in the question. I worked with your original code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate() {
var P = document.getElementById("price").value;
var D = document.getElementById("DP").value;
var R = document.getElementById("R").value;
var N = document.getElementById("N").value;
var i = (R / 1200);
var n = (N * 12);
var m = ((P - D) * i * Math.pow(1 + i,n)) / (Math.pow(1 + i,n) - 1);
var result = document.getElementById('total');
result.value = m;}
</script>
</head>
<div align="center">
<hr/>
<form id="Main">
<input type="number" id="price" placeholder="Price of the Car" />
<br />
<br/>
<input type="number" id="DP" placeholder="Down Payment" />
<br/>
<br/>
<input type="number" id="R" placeholder="Annual % Rate" />
<br/>
<br/>
<input type="number" id="N" placeholder="# of Years Loaned" />
<br/>
<br/>
<input type="button" value="Calculate Monthly Payment" onclick="calculate();" />
<br/>
<br/>
Total Monthly Payment:<input type="number" id="total" placeholder="Total Cost..." readonly="" />
<br/>
<br/>
<input type="reset" value="Reset" />
</form>
<hr/>
</div>

My JQuery script is not retrieving form text values

I'm trying to get the data from a form and use the values for a final result.
The problem is (at least what it looks like when I'm debugging) is no values are being retried and stored in the vars I've created.
Here's the form:
<form>
<p>
<label for="numDigits">Number of Digits: </label>
<input type="text" id="numDigits" name="numDigits" />
</p>
<p>
<label for="num1">First Number: </label>
<input type="text" id="num1" name="num1" />
</p>
<p>
<label for="num2">Second Number: </label>
<input type="text" id="num2" name="num2" />
</p>
<p>
<label for="num3">Third Number: </label>
<input type="text" id="num3" name="num3" />
</p>
<p>
<input type="button" name="calc" id="calc" value="Calculate" />
</p>
<p id="result">Result will be displayed here when the button is pressed.</p>
</form>
and the JQuery script
$("#calc").on('click', function(){
var a = Number($("#numDigits").val());
var x = Number($("#num1").val());
var y = Number($("#num2").val());
var z = Number($("#num3").val());
var total = a * 3 + x + ((a + x - y) % a) + ((a + z - y) % a);
$("#result").html("<p class='id'>" + total + "</p>");
});
Thanks in advance for the help!
Edit: I updated the code to the working version.
Its seems to work well: fiddle
But note that, if you want to manipulate the input as numbers, you should write
var a = Number($("#numDigits").val());
var x = Number($("#num1").val());
var y = Number($("#num2").val());
var z = Number($("#num3").val());
Replace the replaceWith() with html(). I have The DEMO working:
$("#calc").click(function(){
var a = $("#numDigits").val();
var x = $("#num1").val();
var y = $("#num2").val();
var z = $("#num3").val();
var total = a * 3 + x;
total += ((y - x) % a);
total += ((y - z) % a);
$("#result").html(total);
});

Categories

Resources