ピクセルからcmへの変換スクリプトが機能しない

目標は、1つのテキストボックスに一定の値（ピクセルまたはセンチメートル）を入力してからボタンを押すことと、いくつかの数学を実行して結果を別のテキストボックスに表示することです。ピクセルからcmへの変換スクリプトが機能しない

何が起こるかは、入力した文字列が正しく変換されていなかったことを意味する 'NaN'という結果を得ます。私はこれを修正するための何百もの方法を行ってきましたが、それはまだ動作しません。

コード：

<!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>

出典

2016-12-05 Zomarea

はあなたが正しくあなたのonclickハンドラを設定しないことに注意してください、種類の、あなたはすぐに機能を実行しているので、彼らはundefined' 'に設定され、彼らはこの作品、何も –

メソッドに値を渡すされていないので、あなたはhtml要素を渡しています。

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);

あなたがstrcmvalue.valueまたはform.elements["cmvalue"].value

次の問題は、あなたが時間の値を持っているだけになるので、ページのロードが、それはロードするときに値を読み取る事実である必要があります。

したがって、ページを読み込むときではなく、値を読み込んでメソッド内の数値に変換する必要があります。

その後、clickイベントが関数を呼び出していて、参照していません。

var ccmbutton = document.getElementById("convertcm").onclick = function() { 
    var num = parseInt(strcmvalue.value, 10); 
    cm_to_pixel_conversion(num); 
    return false; 
};

出典

2016-12-05 22:20:48 epascarello

を返しません。今すぐ '出力'テキストボックスからデータ消去の問題が発生します（画面上で点滅します）。私はこれに近づく方法を知りません、これが起こるはずですか？ – Zomarea

よく送信ボタンが送信されるので、クリックをキャンセルする必要があります – epascarello

私は「送信」タイプを忘れてしまいました。ありがとうございます。 – Zomarea

ピクセルからcmへの変換スクリプトが機能しない

答えて

関連する問題