I wanted to create a calculator to calculate an Area of a circle, but i think it neither gets a Radius input and also doesnt put the calculated result in input field.
Below is my JavaScript and HTML code:
function calculateAreaOfCirle(myRadious){
return myRadious * myRadious * Math.PI;
}
const Radious = document.getElementById("Radious").value;
document.getElementById('Area')[0].value = calculateAreaOfCirle();
calculateAreaOfCirle();
<form>
<label for="Radious">Radious*Radious</label>
<input type="text" id="Radious" name="Radious">
<label for="Pi">*Pi=</label>
<input type="text" id="Area" name="Area" placeholder="Area">
<button onclick="calculateAreaOfCirle(myRadious)">Calculate</button>
</form>
The issue you have is that you need to get the current radius value in your function, and when you get the value, it is a String, not a Number. You can either use parseInt or make your input type=number
function calculateAreaOfCirle(){
const myRadious = parseFloat(document.getElementById("Radious").value);
document.getElementById('Area').value = myRadious * myRadious * Math.PI;
}
//calculateAreaOfCirle();
<form>
<label for="Radious">Radious*Radious</label>
<input type="number" id="Radious" name="Radious">
<label for="Pi">*Pi=</label>
<input type="text" id="Area" name="Area" placeholder="Area">
<button type="button" onclick="calculateAreaOfCirle()">Calculate</button>
</form>
Related
So I'm trying to make an area calculator for a trapezoid using html and js. My code is shown below, but for some reason I am not getting correct answers out of this. I suspect that is because the code is running the function more than once, but I'm not really sure.
function solveArea() {
var base1, base2, height, area;
base1 = document.getElementById("base1").value;
base2 = document.getElementById("base2").value;
height = document.getElementById("height").value;
area = ((base1 + base2) / 2) * height;
document.getElementById("area").value = area;
}
<form>
<input id="base1" type="number" placeholder="Base 1">
<input id="base2" type="number" placeholder="Base 2">
<input id="height" type="number" placeholder="Height">
<input id="area" type="number" readonly="" placeholder="Area">
<input id="calculate" type="button" value="Calculate" onclick="solveArea()">
<input type="reset" value="Clear">
</form>
You can use parseInt
function solveArea(){
var base1, base2, height, area;
base1= parseInt(document.getElementById("base1").value, 10);
base2= parseInt(document.getElementById("base2").value, 10);
height= parseInt(document.getElementById("height").value, 10);
area = ((base1 + base2) / 2)* height;
document.getElementById("area").value = area;
}
document.getElementById().value is a string, so when you use the + operator it will concatenate the two operands. In your case, you should convert strings to numbers (e.g. with the Number function):
function solveArea() {
let base1 = Number(document.getElementById("base1").value);
let base2 = Number(document.getElementById("base2").value);
let height = Number(document.getElementById("height").value);
let area = (base1 + base2) / 2 * height;
document.getElementById("area").value = area;
}
<form>
<input id="base1" type="number" placeholder="Base 1">
<input id="base2" type="number" placeholder="Base 2">
<input id="height" type="number" placeholder="Height">
<input id="area" type="number" readonly placeholder="Area">
<input id="calculate" type="button" value="Calculate" onclick="solveArea()">
<input type="reset" value="Clear">
</form>
your code is not running multiple times,
the problem is when you do
base1= document.getElementById("base1").value;
base2= document.getElementById("base2").value;
console.log(base1+base2)
and base1 = 1 and base2 = 1
then the output will be
11
So you are receiving the value as a string so just convert it to the number and your code will work fine.
function solveArea(){
var base1, base2, height, area;
base1= document.getElementById("base1").value;
base2= document.getElementById("base2").value;
height= document.getElementById("height").value;
area = ((+base1 + +base2) / 2)*height;
document.getElementById("area").value = area;
}
If you parse the input values as numbers using either parseFloat or Number then you should be bale to perform the basic arithmetic operations you need. Without parsing these numbers they were being treated as strings. The issue with parseInt in this regard is that it would prevent you from using numbers such as 5.25 for input ~ it would be treated as 5...
function solveArea() {
var base1, base2, height, area;
base1 = Number(document.getElementById("base1").value);
base2 = Number(document.getElementById("base2").value);
height = Number(document.getElementById("height").value);
area = ((base1 + base2) / 2) * height;
document.getElementById("area").value = area;
}
<form>
<input id="base1" type="number" placeholder="Base 1">
<input id="base2" type="number" placeholder="Base 2">
<input id="height" type="number" placeholder="Height">
<input id="area" type="number" readonly="" placeholder="Area">
<input id="calculate" type="button" value="Calculate" onclick="solveArea()">
<input type="reset" value="Clear">
</form>
I have a working percentage calculator (As demonstrated below). The 1st Input is for the inital number, the 2nd input is for the percentage and the 3rd outputs the answer.
I am trying to get the answer displayed in the 3rd input field as an integer (whole number only). What JS is needed to achieve this and to show the value in the input field?
<input type="number" class="input" id="without-visitors">
<input type="number" class="input" id="without-conversion">
<input type="number" class="input" id="without-formfillenquiries" readonly>
<script>
$('#without-visitors, #without-conversion').change(function() {
var withoutvisitors = parseFloat($('#without-visitors').val())
var withoutconversion = parseFloat($('#without-conversion').val())
var withoutformfillenquiries = parseFloat($('#without-formfillenquiries').val())
$('#without-formfillenquiries').val(withoutvisitors * withoutconversion / 100);
});
</script>
I added the Math.round() function to the last line - $('#without-formfillenquiries').val(withoutvisitors * withoutconversion / 100); in order to round the result to the nearest whole integer.
$('#without-visitors, #without-conversion').change(function() {
var withoutvisitors = parseFloat($('#without-visitors').val())
var withoutconversion = parseFloat($('#without-conversion').val())
var withoutformfillenquiries = parseFloat($('#without-formfillenquiries').val())
$('#without-formfillenquiries').val(Math.round(withoutvisitors * withoutconversion / 100));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" class="input" id="without-visitors">
<input type="number" class="input" id="without-conversion">
<input type="number" class="input" id="without-formfillenquiries" readonly>
Somehow my below JavaScript code to convert the value from kilometers to nautical mile doesn't seem to work. It seems very simple but I could not find out why I am. I would appreciate your help.
<div class="calculator">
<form>
Enter a value in Kilometers:
<input type="text" id="kM" value="1000"> Result in Nautical Mile:
<input type="text" id="nM" value="" disabled>
<button onclick="return calculate();" id="calculate">CALCULATE</button>
</form>
</div>
<script>
function convert(kiloMeter) {
return kiloMeter / 1.852;
}
function calculate() {
var kMeter = Number(document.getElementById("kM").value);
var convertedValue = convert(kMeter);
document.getElementById("nM").innerHTML =
convertedValue;
return false;
}
</script>
There are at least two issues causing your script to not work
Input elements don't have an innerHMTL property. They have a value. So document.getElementById("nM").innerHTML should be document.getElementById("nM").value
At that point everything should be fine. You shouldn't need to change your button type to button since you return false from the function and the button returns false to the form, stopping the form from submitting. HOWEVER there appears to be an issue with naming your function calculate (at least in Chrome and Firefox) the same as the id of the element (id="calculate"). Changing the name of the function or the id fixes the issue.
function convert(kiloMeter) {
return kiloMeter / 1.852;
}
function calculate() {
var kMeter = Number(document.getElementById("kM").value);
var convertedValue = convert(kMeter);
document.getElementById("nM").value = convertedValue;
return false;
}
<div class="calculator">
<form>
Enter a value in Kilometers:
<input type="text" id="kM" value="1000"> Result in Nautical Mile:
<input type="text" id="nM" value="" disabled>
<button onclick="return calculate();" id="xcalculate">CALCULATE</button>
</form>
</div>
For input tag you should use value rather than innerHtml. You do not need to return false also.
<div class="calculator">
<form>
Enter a value in Kilometers:
<input type="text" id="kM" value="1000"> Result in Nautical Mile:
<input type="text" id="nM" value="" disabled>
<button type='button' onclick="calculate()" id="">CALCULATE</button>
</form>
</div>
<script>
function convert(kiloMeter) {
return kiloMeter / 1.852;
}
function calculate() {
var kMeter = Number(document.getElementById("kM").value);
var convertedValue = convert(kMeter);
document.getElementById("nM").value =
convertedValue;
}
</script>
You should use value instead of innerHTML:
document.getElementById("nM").value = convertedValue;
new guy here. I have a feeling this is an extremely basic question but I can't get this Jquery code to write the output of the function to html and have it show up. I believe it's an issue with the script but unsure if I am doing something wrong with html as well.
The goal of this function is to create a calculator that gives future investment value based on what the user inputs. When I click submit, It used to change all of the html to show just 'NaN' but now when I click the submit button, it clears the input boxes but does not give me any number or any answer even though I believe I've set it to display the number to
HTML
<body>
<div id = "futurevalue">
<form>
<input type="radio" name="formula" value="future_investment" checked>Future Investment<br>
<label for="princeple">Enter the princeple amount invested:</label>
<input id="princeple" type="number" name="princeple" step="0.01"><br>
<label for="time">Enter how long the investment will be for (in years):</label>
<input id='time' type='number' name='time'><br>
<label for='rate'>Enter the expected interest rate:</label>
<input id='rate' type="number" name='rate'><br>
<input id='submit' type='submit' name='submit'>
</form>
<p>Total:</p>
<p id='result'></p>
</div>
jQuery
$('#submit').click(function(){
$('#result').html(function(){
return toString(output,10);
});
});
var princeple = parseInt($('#princeple'),10);
var time = parseInt($('#time'),10);
var rate = parseInt($('#rate'),10);
var output = (princeple * time + rate);
Here is your fix:
$('#submit').click(function(){
var princeple = parseInt($('#princeple').val());
var time = parseInt($('#time').val());
var rate = parseFloat($('#rate').val()/100);
var output = ((princeple * rate) * time);
$('#result').html(output);
//prevent from page reload
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "futurevalue">
<form>
<input type="radio" name="formula" value="future_investment" checked>Future Investment<br>
<label for="princeple">Enter the princeple amount invested:</label>
<input id="princeple" type="number" name="princeple" step="0.01"><br>
<label for="time">Enter how long the investment will be for (in years):</label>
<input id='time' type='number' name='time'><br>
<label for='rate'>Enter the expected interest rate:</label>
<input id='rate' type="number" name='rate'><br>
<input id='submit' type='submit' name='submit'>
</form>
<p>Total:</p>
<p id='result'></p>
</div>
You have to calculate the value inside the click event and assign to the result. The formula for calculating interest is also incorrect.
Try the following code, basically you need:
Calculate your variables inside cb click and than output the resut in your div #result. Use .val to get values for your inputs and event.preventDefault() to avoid form submit (which is the browser default behavior).
$('#submit').click(function(event) {
var princeple = parseInt($('#princeple').val(), 10);
var time = parseInt($('#time').val(), 10);
var rate = parseInt($('#rate').val(), 10);
var output = (princeple * time + rate);
$('#result').html(output);
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="futurevalue">
<form>
<input type="radio" name="formula" value="future_investment" checked>Future Investment<br>
<label for="princeple">Enter the princeple amount invested:</label>
<input id="princeple" type="number" name="princeple" step="0.01"><br>
<label for="time">Enter how long the investment will be for (in years):</label>
<input id='time' type='number' name='time'><br>
<label for='rate'>Enter the expected interest rate:</label>
<input id='rate' type="number" name='rate'><br>
<input id='submit' type='submit' name='submit'>
</form>
<p>Total:</p>
<p id='result'></p>
</div>
I am new to Javascript and I will be thankful if someone help me understand what I am doing wrong. I am trying to calculate the surface area of a trapezoid by obtaining values from input fields. When I press the "Calculate S" button I get a "Nan" as an answer.
This is the major part of the HTML code:
<form method="post">
<label for="a">a</label>
<input type="text" id="a"/> <br/>
<label for="b">b</label>
<input type="text" id="b"/> <br/>
<label for="h">h</label>
<input type="text" id="h"/> <br/>
<button onclick="alert(S)">Calculate S</button>
</form>
And this is the script I am using to obtain the values and calculate the surface:
<script type="text/javascript">
var a=parseInt(document.getElementById("a"), 10);
var b=parseInt(document.getElementById("b"), 10);
var h=parseInt(document.getElementById("h"), 10);
var S=parseInt(((a+b)/2)*h, 10);
</script>
Thanks in advance!
You need to get the value out of each input, not just the input, like this:
<script type="text/javascript">
var a=parseInt(document.getElementById("a").value, 10);
var b=parseInt(document.getElementById("b").value, 10);
var h=parseInt(document.getElementById("h").value, 10);
var S=((a+b)/2)*h;
</script>
Use .value property on the input elements to get their contents. then call parseInt on that to get a number.
No need to parseInt the result too.
var S = ((a + b) / 2) * h;
Wrap the code in a callable function if you want it executed on button click (what you have now will execute when the code been parsed by your browser).
Example found here: http://jsfiddle.net/bpwEh/
Updated code:
<head>
<!-- ... -->
<script>
function calc(){
var a=parseInt(document.getElementById("a").value, 10);
var b=parseInt(document.getElementById("b").value, 10);
var h=parseInt(document.getElementById("h").value, 10);
return ((a+b)/2)*h, 10;
}
</script>
</head>
<body>
<form method="post">
<label for="a">a</label>
<input type="text" id="a"/> <br/>
<label for="b">b</label>
<input type="text" id="b"/> <br/>
<label for="h">h</label>
<input type="text" id="h"/> <br/>
<button onclick="alert(calc()); return false;">Calculate S</button>
</form>
</body>