This is a simple one, I'm new to javascript, but I haven't found any existing answers that can help with this:
I started with a simple calculator that would convert one unit, the Cent (a musical unit of note frequency difference) to a decimal.
<html>
<head>
<script language="JavaScript">
function tun(form) {
var i = parseFloat(form.Cents.value, 10);
var o = 0;
p = i / 3986.313714
o = Math.pow(10, p)
form.Decimal.value = o;
}
</script>
</head>
<body>
<FORM>Cents:
<INPUT NAME="Cents" VALUE="0" MAXLENGTH="15" SIZE=15>
<p>Click to Convert
<INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON onClick=tun(this.form)>
<p>Decimal:
<INPUT NAME="Decimal" SIZE=15>
</FORM>
</body>
</html>
Now I want to change this to a converter for many types of units into each other, using the Decimal as a go-between. I'd like the 'input unit' and 'output unit' to be selectable from dropdown menus.
Here's where I am so far:
<html>
<head>
<script language="JavaScript">
function tun(form) {
var i = parseFloat(form.Cents.value, 10);
var o = 0;
p = i / 3986.313714
o = Math.pow(10, p)
form.Decimal.value = o;
}
</script>
<script>
function selectedunit() {
var mylist = document.getElementById("InputList");
document.getElementById("units").value = InputList.options[mylist.selectedIndex].text;
}
</script>
</head>
<body>
<form>Select units to convert from:
<select id="InputList" onchange="selectedunit()">
<option></option>
<option>Cents</option>
<option>Savarts</option>
<option>Jots</option>
<option>Merides</option>
</select>
<p>Selected Units:
<input type="text" id="units" </p>
<br>Cents:
<INPUT NAME="Cents" VALUE="0" MAXLENGTH="15" SIZE=15>
<p>Click to Convert
<INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON onClick=tun(this.form)>
<p>Decimal:
<INPUT NAME="Decimal" SIZE=15>
</FORM>
</body>
</html>
So I'd like to be able to selected any input unit and any output unit, then enter a value and calculate away - a bit like a currency converter
Any help?
Jim
Try and make two different javascript functions
AnyUnitToDecimalConverter() Function
DecimalToAnyUnitConverter() Function
Now suppose you need to convert from X unit to Y unit: Call AnyUnitToDecimalConverter(valueX), this will give you a decimal answer say AnsDecimal and now Call DecimalToAnyUnitConverter(AnsDecimal);
Related
I know that this might be simple, but I was trying to create some sort of system in HTML using Javascript, that when you input a number in the input tag it multiplies it with another number, them outputs the number in another input tag. But for some strange reason, I can't really find out how to do it
<!DOCTYPE html>
<html>
<head>
<script>
var test = document.getElementById('input');
function myFunction() {
document.getElementById('output').value = test + 20;
}
</script>
</head>
<body>
Input: <input id="input">
<button onclick="myFunction()">Submit</button>
<br><br>
<input id="output" type="text">
</body>
</html>
Btw, I don't know how to use JQuery or those types of things, so could you write it in simple HTML?
You should set the value property of an input rather than innerHTML:
Also use parseInt so that you can sum the numbers as input.value will be a string.
function myFunction() {
document.getElementById('output').value = parseInt(test.value, 10) + 20;
}
Here is a working demo: https://jsfiddle.net/usmanmunir/1uv9cqys/8/
function myFunction() {
var test = document.getElementById('input').value;
document.getElementById('output').value = parseInt(test) * 20;
}
Input: <input id="input" type="number">
<button onclick="myFunction()">Submit</button>
<br><br>
Final : <input id="output" type="text">
Here's a code i tried to study by changing stuff in it.
<html>
<head>
<script language="JavaScript">
<!-- hide this script from old browsers
function temp(form)
{
var f = parseFloat(form.DegF.value, 10);
var c = 0;
c = (f - 32.0) * 5.0 / 9.0;
form.DegC.value = c;
}
// done hiding from old browsers -->
</script>
</head>
<body>
<FORM>
<h2>Fahrenheit to Celsius Converter</h2>
Enter a temperature in degrees F:
<INPUT NAME="DegF" VALUE="0" MAXLENGTH="15" SIZE=15>
<p>
Click this button to calculate the temperature
in degrees C:
<INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON
onClick=temp(this.form)>
<p>
Temperature in degrees C is:
<INPUT NAME="DegC" READONLY SIZE=15>
</FORM>
</body>
</html>
But I cannot figure out why the guy who wrote this code included 10 in the variable f line
var f = parseFloat(form.DegF.value, 10);
Why is the value 10 there?
The ouput did'nt change when it removed it.
I got an assignment to multiply 2 matrices that the user inputs in the form text box like so:
[[1,2,3],[4,5,6],[7,8,9]]
So I created a var matrix1 and matrix2 that take the string values with a command document.getElementById("matrixID").value, but I don't know how to separate them in their own values, creating an array or a matrix of a variable (setting 1,2,3... as separate matrix/array values).
I'm not allowed to use JQuery (even though I don't think it's needed anyway). The current code looks like so:
<!DOCTYPE html>
<html>
<head>
<title>Matrix multiply</title>
<script type="text/javascript">
function calc(){
var matrix1string = document.getElementById("m1").value;
var matrix2string = document.getElementById("m2").value;
}
</script>
</head>
<body>
<form>
Matrix 1: <input type="text" id="m1" name="mat1" style="width: 500px"><br>
Matrix 2: <input type="text" id="m2" name="mat2" style="width: 500px"><br>
<input type="button" value="Calculate" onclick="calc();"><br><br>
-Result: <input type="text" id="rez" name="mat2" style="width: 500px" readonly>
</form>
</body>
</html>
You can do this:
var matrix1 = JSON.parse(matrix1string);
var matrix2 = JSON.parse(matrix2string);
This is HTML codes:
<html>
<head>
<script src = "tempScript.js" text = "text/javascript">
</script>
</head>
<body>
<h3><b>Farenheit to Celsius Converter</b></h3>
<p>Enter a temperature in degrees F:
<input type="text" id="textbox" /></p>
<p>Click this button to calculate the temperature in degrees C:
<input type="submit" value="Calculate" onclick="temp ()" /></p>
<p>Temperature in degrees C is: <input type="temp ()"/></p>
</body>
</html>
And this is javascript code:
function temp ()
{
var f = document.getElementById("textbox").value;
var c = ((f - 32.0)*5.0) / 9.0;
return c;
}
Were there any problem with this codes?
Actually, what I wanted to do was to get the return value and then display the value in the field of "Temperature in degrees C is". But I could not find the mistakes.Please point it out if I have mistakes.
You cant call/assign method in 'value' below is the correct method
<h3><b>Farenheit to Celsius Converter</b></h3>
<p>Enter a temperature in degrees F:
<input type="text" id="textbox" /></p>
<p>Click this button to calculate the temperature in degrees C:
<input type="submit" value="Calculate" onclick="temp();" /></p>
<p>Temperature in degrees C is: <input id="degrees" /></p>
<script type="text/javascript">
function temp() {
var f = document.getElementById("textbox").value;
var c = ((f - 32.0) * 5.0) / 9.0;
document.getElementById("degrees").value = c;
}
</script>
<input type="temp ()"/> is not valid html. try this.
<html>
<head>
<script src = "tempScript.js" text = "text/javascript">
</script>
</head>
<body>
<h3><b>Farenheit to Celsius Converter</b></h3>
<p>Enter a temperature in degrees F:
<input type="text" id="textbox" /></p>
<p>Click this button to calculate the temperature in degrees C:
<input type="submit" value="Calculate" onclick="temp ()" /></p>
<p>Temperature in degrees C is: <input id="tmpDisplay" value=""/></p>
</body>
</html>
<script>
function temp ()
{
var f = document.getElementById("textbox").value;
var c = ((f - 32.0)*5.0) / 9.0;
document.getElementById("tmpDisplay").value=c;
return false;
}
</script>
Note: I added and id for the input where the result is to be displayed. You set the value of that input to the calculated value in your javascript. Note the return false in the script. This is to prevent the form from being submitted to the server.
I think the error is in line:
<input type="temp ()"/>
The type of the input the format it's shown in. You need to add a value to return to:
<input type="text" value="temp()"/>
This should then display the result in html.
Instead of putting it in type() of input, put it as value. Working fiddle-
http://jsfiddle.net/RDue8/2/
I am new to HTML and Javascript. I am trying to experiment on invoking C++ method from Javascript using QT. However, this question is not related to QT.
I have a form with two number inputs. I want to add a third box where the results will be displayed. How can I do so? here is my html file. I don't want all the items to be gone. I want the user to see the multilicant A, mulitplicant B, and the result to be displayed in third text box the form. Also, a reset button to reset the form.
<html>
<head>
<script>
function Multiply()
{
var result = myoperations.sumOfNumbers(document.forms["DEMO_FORM"]["Multiplicant_A"].value, document.forms["DEMO_FORM"]["Multiplicant_B"].value);
document.write(result);
}
</script>
</head>
<body>
<form name="DEMO_FORM">
Multiplicant A: <input type="number" name="Multiplicant_A"><br>
Multiplicant B: <input type="number" name="Multiplicant_B"><br>
<input type="button" value="Multiplication_compute_on_C++" onclick="Multiply()">
</form>
</body>
</html>
This is a way to start:
Demo: http://jsfiddle.net/Q3YV9/
<html>
<head>
<script>
function Multiply()
{
var res = parseFloat(document.getElementById("anr").value) * parseFloat(document.getElementById("bnr").value)
document.getElementById("cnr").value = res;
}
</script>
</head>
<body>
<form name="DEMO_FORM">
Multiplicant A: <input type="number" id="anr" name="Multiplicant_A"><br>
Multiplicant B: <input type="number" id="bnr" name="Multiplicant_B"><br>
Result C: <input type="number" id="cnr" name="Multiplicant_C"><br>
<input type="button" value="Multiplication_compute_on_C++" onclick="Multiply()">
</form>
</body>
</html>
If you don't want the result box predefined, use document.createElement('input') to add it to the DOM.
Sample:
function Multiply()
{
var res = parseFloat(document.getElementById("anr").value) * parseFloat(document.getElementById("bnr").value)
//document.getElementById("cnr").value = res;
var newinput = document.createElement('input');
newinput.setAttribute('value', res);
document.forms["DEMO_FORM"].appendChild(newinput);
}
And this demo shows how to add the input result anywhere in the document:
http://jsfiddle.net/Q3YV9/3/
Simplest is to put in an answer box using a div tag
<html>
<head>
<script>
function Multiply()
{
var result = myoperations.sumOfNumbers(document.forms["DEMO_FORM"]["Multiplicant_A"].value, document.forms["DEMO_FORM"]["Multiplicant_B"].value);
document.getElementById('answerbox').innerHTML=result;
}
</script>
</head>
<body>
<form name="DEMO_FORM">
Multiplicant A: <input type="number" name="Multiplicant_A"><br>
Multiplicant B: <input type="number" name="Multiplicant_B"><br>
<input type="button" value="Multiplication_compute_on_C++" onclick="Multiply()">
</form>
<div id='answerbox'><div>
</body>
</html>
By the way type="number" is new in HTML5 for previous versions use type="text" and then do a parseInt on the value for an integer and parseFloat on the value for a decimal number.