I currently have a form that draws a circle based on user input and outputs the diameter in the console as well. However, when I input a number with a decimal, it just converts it to a whole number. For example if I input 5.68, it takes my input as 5. How do I make it so that It recognized decimal numbers?
https://jsfiddle.net/Kaevonz/wsgfhjLc/215/
$(function() {
$('.circle').hide();
$('#outer_diameter').on('change', function() {
var $outer_diameter = parseInt($("#outer_diameter").val());
var $converted = ($outer_diameter * 10);
console.log($outer_diameter, $converted);
/*const $circalc = (2 * Math.PI * ($outer_diameter / 2)).toPrecision(6);*/
$('.circle').css({
height: (2 * $converted),
width: (2 * $converted),
top: "calc(50% - " + ($converted) + "px)",
left: "calc(50% - " + ($converted) + "px)"
});
$('.circle').fadeIn(300);
$('#error').hide();
})
$('.circle2').hide();
$('#inner_diameter').on('change', function() {
var $inner_diameter = parseInt($("#inner_diameter").val());
var $converted_2 = ($inner_diameter * 10);
console.log($inner_diameter, $converted_2);
$('.circle2').css({
height: (2 * $converted_2),
width: (2 * $converted_2),
top: "calc(50% - " + ($converted_2) + "px)",
left: "calc(50% - " + ($converted_2) + "px)"
});
$('.circle2').fadeIn(300);
})
});
Use parseFloat() rather than parseInt(). This will keep the fractions.
When you display the result later, use toFixed(3) to specify the number of digits to show.
$(function() {
$('.circle').hide();
$('#outer_diameter').on('change', function() {
var $outer_diameter = parseFloat($("#outer_diameter").val());
var $converted = ($outer_diameter * 10);
console.log($outer_diameter.toFixed(3), $converted.toFixed(3));
/*const $circalc = (2 * Math.PI * ($outer_diameter / 2)).toPrecision(6);*/
$('.circle').css({
height: (2 * $converted),
width: (2 * $converted),
top: "calc(50% - " + ($converted) + "px)",
left: "calc(50% - " + ($converted) + "px)"
});
$('.circle').fadeIn(300);
$('#error').hide();
})
$('.circle2').hide();
$('#inner_diameter').on('change', function() {
var $inner_diameter = parseFloat($("#inner_diameter").val());
var $converted_2 = ($inner_diameter * 10);
console.log($inner_diameter.toFixed(3), $converted_2.toFixed(3));
$('.circle2').css({
height: (2 * $converted_2),
width: (2 * $converted_2),
top: "calc(50% - " + ($converted_2) + "px)",
left: "calc(50% - " + ($converted_2) + "px)"
});
$('.circle2').fadeIn(300);
})
});