I'm exercising in calculations with variables using javascript and i can't figure out how to use superscripts in variables. With some help Javascript calculations holding variables i learned how to do calculations in general but my new question is how to use superscripts?
<form name="Calcultor" Method="Get" id='form1'>First Number:
<input type="text" name="first" size="35" id="first">+ Second Number:
<input type="text" name="second" size="35" id="second">
<br>Answer:
<input type="text" name="ans" size="35" id="ans" />
<input type="text" name="ans2" size="35" id="ans2" />
<button type="button" onclick="Calculate();">Calculate</button>
</form>
<script>
function Calculate() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
var ans = document.getElementById('ans').value;
var ans2 = document.getElementById('ans2').value;
document.getElementById('ans').value = parseInt(first) + parseInt(second);
document.getElementById('ans2').value = 1.112 - 0.00043499 * parseInt(document.getElementById('ans').value)/*insert ans into a parenthensis*/ + 0.00000055 * parseInt(document.getElementById('ans').value)/*insert ans into a parenthensis and ^2 outside the parenthesis*/ - 0.00028826;
}
</script>
Thanks in advance
There is a function in javascript Math.pow();
Math.pow(2,4) gives you 2^4 = 16.
Math.pow(2,4);
>16
Math.pow(2,4.1);
>17.148375400580687
<form name="Calcultor" Method="Get" id='form1'>First Number:
<input type="text" name="first" size="35" id="first">+ Second Number:
<input type="text" name="second" size="35" id="second">
<br>Answer:
<input type="text" name="ans" size="35" id="ans" />
<input type="text" name="ans2" size="35" id="ans2" />
<button type="button" onclick="Calculate();">Calculate</button>
</form>
<script>
function Calculate() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
var ans = document.getElementById('ans').value;
var ans2 = document.getElementById('ans2').value;
document.getElementById('ans').value = parseInt(first) + parseInt(second);
document.getElementById('ans2').value = 1.112 - 0.00043499 * parseInt(document.getElementById('ans').value) + 0.00000055 * Math.pow(parseInt(document.getElementById('ans').value), 2) - 0.00028826;
}
</script>
Updated Snippet according to answers works now!
Related
I am trying to recalculate the form based on a payment method. What I have is sort of working. It fails however if the payment method is changed after entering the number of widgets needed. The widget 2 value stays intact but the widget 1 calculation reverts to 0 yet the entered number is still in the number of widgets needed for Widget 1.
function lf(vntAmount) {
vntAmount = parseFloat(vntAmount) || 0; // find number (parseFloat) switch it to 0 if not a number
vntAmount = vntAmount * 100; // cost of widget 1
document.frmConvert.box1.value = vntAmount.toFixed(2)
}
function rf(vntAmount) {
vntAmount = parseFloat(vntAmount) || 0; // find number (parseFloat)
vntAmount = vntAmount * 200; // cost of widget 2
document.frmConvert.box2.value = vntAmount.toFixed(2)
}
function calculate() {
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
// var result = document.getElementById('result'); // don't know what this does
if (document.getElementById('visa_checked').checked) {
var myResult = (parseFloat(myBox1) + parseFloat(myBox2)) * .15;
} else {
var myResult = (parseFloat(myBox1) + parseFloat(myBox2)) * .12;
}
var myResult2 = myResult + (parseFloat(myBox1) + parseFloat(myBox2));
result.value = myResult.toFixed(2);
result2.value = '$' + myResult2.toFixed(2);
}
body {
font-family: arial;
font-size: 100%;
color: #aea2a2
}
<html>
<head>
<title>Test Form</title>
<script type="text/javascript">
onload = function() {
location.href = "#";
}
</script>
</head>
<body>
<FORM ACTION="processform.php" METHOD=POST name="frmConvert">
<h4>Widgets For Sale</h4>
Mandatory field *<br><br> Name*
<br>
<input type="text" name="sheetdata[]" size="42"><br><br> Address
<br>
<input type="text" name="sheetdata[]" size="42"><br><br> City
<br>
<input type="text" name="sheetdata[]" size="42"><br><br> Postal Code<br>
<input type="text" name="sheetdata[]" size="42"><br><br> Email
<br>
<input type="text" name="sheetdata[]" size="42"><br><br> Phone*
<br>
<input type="text" name="sheetdata[]" size="42"><br><br> Method of payment<br>
<input type="radio" name="sheetdata[]" value="Visa" id="visa_checked" onChange="lf(this.value);calculate();">Visa<br>
<input type="radio" name="sheetdata[]" value="Cheque" onChange="lf(this.value);calculate();">Cheque<br>
<input type="radio" name="sheetdata[]" value="E-Transfer" onChange="lf(this.value);calculate();" checked>E Transfer<br>
<br><br> Number of Widget One needed:<br>
<input name="sheetdata[]" id="txtAmount" type="text" value="" onchange="lf(this.value);calculate();" size="3" value="0" /> # $100 <input name="sheetdata[]" size="5" readonly="readonly" id="box1" value="0" />
<br><br> Number of Widget Two needed<br>
<input name="sheetdata[]" id="txtAmount2" type="text" value="" onChange="rf(this.value);calculate();" size="3" value="0" /> # $200 <input name="sheetdata[]" size="5" readonly="readonly" id="box2" value="0" />
<br><br> Tax 12% <input name="sheetdata[]" id="result" size="5" readonly="readonly" /> 3 % added for Credit Card
<br><br> Total <input name="sheetdata[]" id="result2" size="5" readonly="readonly" />
<input type="hidden" name="sheet_name" value="Test_Form">
<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
<p>Thank You!</p>
</form>
</body>
</html>
Not sure what to try to fix this.
I have the following form:
<form id="taskform">
Habit: <input id="taskname" type="text">
<textarea id="taskdesc" rows="4" cols="50" name="comment" form="usrform">Description Here...</textarea>
<div>
Good or Bad:
<input type="radio" id="star" name="priority" value="1" checked/><label for="star1" title="Not very important">Good</label>
<input type="radio" id="star" name="priority" value="2"/><label for="star2" title="Kinda important">Bad</label>
</div>
<br>Starting Date: <input id="deadlinedate" type="date">
Times you want to do it: <input type="number" id="reminderdays" min="0">
<span type="button" id="sBtn" value="Add Habit" onclick="newElement()" class="addBtn" >Add Habit</span>
<input type="reset" value="Clear">
</form>
I have a js function which takes the values of each field here and it should add them together:
var li = document.createElement("li");
var inputValue = document.getElementById("taskname").value;
var inputDescription = document.getElementById("taskdesc").value;
var inputStar = document.getElementById("star").value;
var inputDate = document.getElementById("deadlinedate").value;
var inputReminderDays = document.getElementById("reminderdays").value;
var t1 = document.createTextNode(inputValue);
var t2 = document.createTextNode(inputDescription);
var t3 = document.createTextNode(inputStar);
var t4 = document.createTextNode(inputDate);
var t5 = document.createTextNode(inputReminderDays);
now I am trying to combine all of the strings t1,t2,t3,t4 and t5 together and then add to a list object.
it does add to a list if I use just for example t1, by doing this:
li.appendChild(t1);
if I use concat and try to add t2, t3, t4 and t5 to my t1 and then use this
li.appendChild(res);
with res being the sum of all of the values my list is empty and nothing is added,
i am not sure how to do this, I dont know why concat or + doesnt work.
also I can not get the value for my date and radio for some reason.
If all you want to do is to combine the strings then nhy not try this:
var t1 = document.createTextNode(inputValue+' '+inputDescription+' '+inputStar+' '+inputDate+' '+inputReminderDays);
UPDATE:
var output = document.getElementById('output');
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("taskname").value;
var inputDescription = document.getElementById("taskdesc").value;
var inputStar1 = document.getElementById("star1");
var inputStar2 = document.getElementById("star2");
var inputDate = document.getElementById("deadlinedate").value;
var inputReminderDays = document.getElementById("reminderdays").value;
// Since you only have two radio buttons you can use a ternary to get the right value base on if oneis checked or not.
var inputStar = inputStar1.checked ? inputStar1.value : inputStar2.value;
var t1 = document.createTextNode(inputValue + ', ' + inputDescription + ', ' + inputStar + ', ' + inputDate + ', ' + inputReminderDays);
li.appendChild(t1);
output.appendChild(li);
}
<form id="taskform">
Habit: <input id="taskname" type="text"><br/>
<textarea id="taskdesc" rows="4" cols="50" name="comment" form="usrform" placeholder="Description Here..."></textarea>
<div>
Good or Bad:
<input type="radio" id="star1" name="priority" value="1" checked/><label for="star1" title="Not very important">Good</label>
<input type="radio" id="star2" name="priority" value="2" /><label for="star2" title="Kinda important">Bad</label>
</div>
<br>Starting Date: <input id="deadlinedate" type="date"> Times you want to do it: <input type="number" id="reminderdays" min="0" value="1">
<button type="button" id="sBtn" value="Add Habit" onclick="newElement()" class="addBtn">Add Habit</button>
<input type="reset" value="Clear">
</form>
<hr/>
<ul id="output">
</ul>
I have been trying to get a random number generator for the numbers to be between the two inputs. I have a code
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<script>
function myFunction() {
var x = document.getElementById("randnum")
x.innerHTML = Math.floor((Math.random() * 'low') + 'high');
}
</script>
As you would have noticed, I have the javascript in the one code.
where I put in 'low' and 'high' works with a fixed number
You need to get the value of the inputs and apply them to the calculations. - note that i am using parseInt() to convert the input values to numbers. Also - using 1 will as the low value will always yield are result of 10 since your getting the math.floor - which will equate to 0 - so 0 + 10 = 10.
Based on #Quentins comment - i alered the caluclation to suit your numbers.
function myFunction() {
var x = document.getElementById("randnum");
var high = parseInt(document.getElementById("high").value);
var low = parseInt(document.getElementById("low").value);
x.innerHTML = Math.floor(Math.random()*(high-low+1)+low)
}
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<script>
myFunction = () => {
let min = parseInt(low.value, 0);
let max = parseInt(high.value, 0);
let x = document.getElementById("randnum")
x.innerHTML = Math.floor(Math.random() * (max - min)) + min;
}
</script>
I think this will help.
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<script>
function myFunction() {
var x = document.getElementById("randnum")
var low = document.getElementById("low").value;
var high = document.getElementById("high").value;
x.innerHTML = Math.floor((Math.random() * low) + high);
}
</script>
var max = parseInt($("#high")[0].value);
var min = parseInt($("#low")[0].value);
x.innerHTML = Math.floor(Math.random() * max) + min;
First, in (Math.random() * 'low') + 'high', low and high are not really the integer values.
Second, a very IMPORTANT issue others did not mention is that Math.random() returns a double value between 0 and 1. If you follow some of the other answers, the random number will always be 0.
use this:
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number"
value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number"
value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<script>
function myFunction() {
var x = document.getElementById("randnum")
var low = document.getElementById("low").value;
var high = document.getElementById("high").value;
var random = Math.random();
x.innerHTML = Math.floor(random * (high-low) + high);
}
</script>
<form name="pgenerate">
<input type="text" size=18 name="output">
<input type="button" value="Generate Password" ><br />
<b>Password Length:</b> <input type="text" name="thelength" size=3 value="7">
</form>
How can i make a random password generator that will generate password inside an input you can use in you projects or systems
var keylist="abcdefghijklmnopqrstuvwxyz123456789"
var temp=''
function generatepass(plength){
temp=''
for (i=0;i<plength;i++)
temp+=keylist.charAt(Math.floor(Math.random()*keylist.length))
return temp
}
function populateform(enterlength){
document.pgenerate.output.value=generatepass(enterlength)
}
<form name="pgenerate">
<input type="text" size=18 name="output">
<input type="button" value="Generate Password" onClick="populateform(this.form.thelength.value)"><br />
<b>Password Length:</b> <input type="text" name="thelength" size=3 value="7">
</form>
No need to reinvent the wheel. Check out this library: https://www.npmjs.com/package/generate-password which does exactly what you want.
Try this pure JS solution:
function generateRandomPassword (passwordLength) {
var outputPassword = "";
var allPossibleChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < passwordLength; i++) {
outputPassword += allPossibleChars.charAt(Math.floor(Math.random() * allPossibleChars.length));
}
return outputPassword;
}
<form name="pgenerate">
<input type="text" size=18 id="output" name="output">
<input type="button" value="Generate Password" onclick="document.getElementById('output').value = generateRandomPassword(document.getElementById('thelength').value);"><br />
<b>Password Length:</b> <input type="text" id="thelength" name="thelength" size=3 value="7">
</form>
If you want to add more possible chars simply update allPossibleChars.
I have two textboxes Num1 and Num2 and another textbox Sum having the value 10.
How can I do this wherein if the user will enter a number for Num1, it will add it to Sum and dynamically change the displayed number in the Sum textbox. If the user will enter a number in Num2 it will also add that number to the updated number shown in Sum textbox and dynamically change the value for Sum textbox also.
How to do this in Javascript?
Something like that:
<input type="text" id="Num1" value="1" onblur="recalculateSum();"/>
<span>+</span>
<input type="text" id="Num2" value="1" onblur="recalculateSum();"/>
<span>=</span>
<input type="text" id="Sum" value=""/>
<script>
function recalculateSum()
{
var num1 = parseInt(document.getElementById("Num1").value);
var num2 = parseInt(document.getElementById("Num2").value);
document.getElementById("Sum").value = num1 + num2;
}
</script>
Another version.
<!DOCTYPE html>
<html>
<head>
<title>Summer</title>
</head>
<body>
Num 1: <input type="text" id="num1" name="num1" value="4"/><br />
Num 2: <input type="text" id="num2" name="num2" value="6"/><br />
Sum <input type="text" id="sum" name="sum" value="10">
<script type="text/javascript">
var _num1 = document.getElementById('num1');
var _num2 = document.getElementById('num2');
var _sum = document.getElementById('sum');
_num1.onblur = function(){
_sum.value = (parseInt(_sum.value,10) + parseInt(this.value,10));
};
_num2.onblur = function(){
_sum.value = (parseInt(_sum.value,10) + parseInt(this.value,10));
};
</script>
</body>
</html>
<input type="text" id="Num1" name="Num1"/>
<input type="text" id="Num2" name="Num2"/>
<input type="text" id="Sum" name="Sum"/>
function addNums() {
var num1 = parseInt(document.getElementById('Num1').value,10);
var num2 = parseInt(document.getElementById('Num2').value,10)
document.getElementById('Sum').value = (num1 + num2).toString();
}
There are other ways to reference the form items, but this one works.
<input type="text" id="Num1" value="1" onblur="recalculateSum();"/>
<input type="text" id="Num2" value="1" onblur="recalculateSum();"/>
<input type="text" id="Sum" value=""/>
<script>
function recalculateSum()
{
var num1 = parseInt(document.getElementById("Num1").value);
var num2 = parseInt(document.getElementById("Num2").value);
document.getElementById("Sum").value = num1 + num2;
}
</script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(){
var x=parseInt(document.getElementById("first").value);
var y=parseInt(document.getElementById("second").value);
document.getElementById("answer").value=(x+y);
}
</script>
<title>exam</title>
</head>
<body>
<form>
First:<input id="first" name="first" type="text"><br>
Second:<input id="second" name="second" type="text"><br>
Answer:<input id="answer" name="answer" type="text"><br>
<input onclick="calculate()" type="button" value="Addition">
</form>
</body>
</html>