Pixel to cm conversion script not working
Question
The goal is to type in one text box a certain value (of pixels or centimeters) then to press a button, and the button to do some maths and show the result in a different text box.
What happens is, I'll get a result of 'NaN', implying that the string I inputted hadn't been converted properly. I've gone through hundreds of methods to fix this and it still doesn't work.
Code :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Conversion</title> </head> <body bgcolor=#FF0000> <form id="conversions" name="conversions"> Pixel value : <br> <input type="text" name="pxvalue" id="pxvalue"> <br> <input type="submit" name="convertcm" id="convertcm" value="Convert cm to px!"> <input type="submit" name="convertpx" id="convertpx" value="Convert px to cm!"> <br>Centimeter value : <br> <input type="text" name="cmvalue" id="cmvalue"> <br> <br>Output : <input type="text" name="output" id="output"> </form> <!-- This is where all the JavaScript code goes --> <script> var form = document.getElementById("conversions"); var strcmvalue = form.elements["cmvalue"]; var strpxvalue = form.elements["pxvalue"]; var cmvalue = ToInteger(strcmvalue); var pxvalue = ToInteger(strpxvalue); var output = document.getElementById("output"); var ccmbutton = document.getElementById("convertcm").onclick = cm_to_pixel_conversion(cmvalue); var cpxbutton = document.getElementById("convertpx").onclick = pixel_to_cm_conversion(pxvalue); var cm_per_pixel = 0.026458333; var px_per_cm = 37.795275591; function pixel_to_cm_conversion(pvalue) { cmconversion = pvalue / px_per_cm; output.value = cmconversion.toString(); } function cm_to_pixel_conversion(cvalue) { pxconversion = cvalue / cm_per_pixel; output.value = pxconversion.toString(); } function ToInteger(x) { x = Number(x); return x < 0 ? Math.ceil(x) : Math.floor(x); } </script> <!-- End of the JavaScript code--> </body> </html>
1 answers
solution1
2 ACCPTED 2016-12-05 22:20:48
Because you are not passing a value to the method, you are passing an html element.
var strcmvalue = form.elements["cmvalue"]; //reference element
var strpxvalue = form.elements["pxvalue"];
var cmvalue = ToInteger(strcmvalue); //passing element, not the value
var pxvalue = ToInteger(strpxvalue);
You need strcmvalue.value or form.elements["cmvalue"].value
Next issue is the fact you read the values when the page loads, so you will only ever have the values from the time it loads.
So you should be reading the values and converting them to numbers inside of your methods, not when the page loads.
After that your click event is calling the function, not referencing it.
var ccmbutton = document.getElementById("convertcm").onclick = function () {
var num = parseInt(strcmvalue.value, 10);
cm_to_pixel_conversion(num);
return false;
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.