3

Form (INPUT1) の 1 つの要素から入力を取り、本質的に OUTPUT1=((INPUT1/20) .58) .30 になる計算を実行しようとしています。CM をインチなどに変換する例をいくつか見てきました。 ..しかし、操作の順序は何もありません。助けてください！壁と頭が何度もぶつかりました。これは私がこれまでに持っているものです（これは機能しません）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transititonal//EN"
""http://www.w3.org/TR/XHTML1/DTD/xhtml1-transitional.dtd">

<html>
<head></head>
<body>

<form name="TESTING">
<table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
<tr><th colspan="2"><h1>TESTING</h1></th></tr>
<tr>  <th><h3>INPUT</h3></th>
<th><h3>OUTPUT</h3></th>    </tr>
<tr></tr>
<td><input type="number" name="INPUT1"/></td>
<td><input type="number" name="OUTPUT1"></td>
<table>

</form>

<script type="text/javascript">
var USERINPUT1 = document.TESTING.INPUT1.value;
var CALC1 = USERINPUT1/20;
var CALC2 = CALC1*.585;
var CALC3 = CALC2*.30;
var CALC3 = OUTPUT1;

</script>
</body>
</html>
4

3 に答える 3

2

あなたはいくつかのことを間違っていました。

まず、入力値を特定の時間に読み取る必要があります。たとえば、ボタンが押されたとき、入力フィールドの値が変更されたとき、または同様の状況です。あなたの場合、入力フィールドに値がなかったときに、ドキュメントが解析されるとすぐに読み取られました。

次に、結果を出力フィールドに書き込んでいません。この行var CALC3 = OUTPUT1;は、CALC3 変数を再宣言し、それに値 OUTPUT1 を与えます。必要なのは、フィールド OUTPUT1 の値を CALC3 として設定することです

これを試して：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transititonal//EN"
""http://www.w3.org/TR/XHTML1/DTD/xhtml1-transitional.dtd">

<html>
<head></head>
<body>

<form name="TESTING">
<table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
<tr><th colspan="2"><h1>TESTING</h1></th></tr>
<tr>  <th><h3>INPUT</h3></th>
<th><h3>OUTPUT</h3></th>    </tr>
<tr></tr>
<td><input type="number" name="INPUT1" id="input" onchange="calculate();"/></td>
<td><input type="number" name="OUTPUT1" id="output"></td>
<table>

</form>

<script type="text/javascript">
function calculate() {

var USERINPUT1 = document.TESTING.INPUT1.value;
var CALC1 = USERINPUT1/20;
var CALC2 = CALC1*.585;
var CALC3 = CALC2*.30;
document.TESTING.OUTPUT1.value = CALC3;

}

</script>
</body>
</html>

最初の入力フィールドの値が変更されると、関数 calculate() ( onchange="calculate();") が呼び出され、2 番目のフィールドが自動的に更新されます (値を読み取るのと同じように書き込みますdocument.TESTING.OUTPUT1.value = CALC3;)。

[編集] コードの最初のバージョンはあなたのものとほとんど同じなので、より簡単に理解できるでしょうが、これも見てください。表の行タグの位置が間違っていたり、コードが乱雑だったりしたので、少し整理しました。ベスト プラクティスにはまだほど遠いですが、ページの改良版です

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <form name="TESTING">
        <table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
            <tr>
                <th colspan="2">
                    <h1>TESTING</h1>
                </th>
            </tr>
            <tr>  
                <th>
                    <h3>INPUT</h3>
                </th>
                <th>
                    <h3>OUTPUT</h3>
                </th>    
            </tr>
            <tr> 
                <td>
                    <input type="number" name="INPUT1" id="input" onchange="calculate();"/>
                </td>
                <td>
                    <input type="number" name="OUTPUT1" id="output">
                </td>
            </tr>
        </table>
    </form>

<script type="text/javascript">
    function calculate() {
        var USERINPUT1 = document.TESTING.INPUT1.value,
            RESULT = (USERINPUT1/20) * .585 * .30;
        document.TESTING.OUTPUT1.value = RESULT;
    }
</script>
</body>
</html>
于 2012-09-07T14:23:37.757 に答える
1

jQueryをまったく使用できますか？

もしそうなら、これはあなたが提供したものを使用します: http://jsfiddle.net/vuYMs/

それ以外の場合は、jQuery なしで動作するように変更できます。

編集：

これは、より JavaScript 指向のソリューションです: http://jsfiddle.net/vuYMs/3/

var input1 = document.getElementsByName("INPUT1")[0];
var output1 = document.getElementsByName("OUTPUT1")[0];

function changeInput(e){ 
    var calc = (((input1.value/20)*0.585)*0.30);
    output1.value = calc;
}

input1.onchange = changeInput;
于 2012-09-06T19:28:53.550 に答える
0

以下のコードは、必要な自動計算機を構築します。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(ele)
{
    var result = ((ele / 20) * 0.585) * 0.30;
    document.getElementById("output1").value = result;
}
</script>

<style type="text/css">
body                    { font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; margin:0; padding:0; }
.container              { background:#0CC; border:1px dotted #bbb; margin:40px auto 0 auto;  padding: 20px; width:500px; }
h1                      { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:bold; text-align:center; text-decoration:underline;  }
input                   { border:1px solid #eee; }
.container p label      { width:100px; float:left; }
p                       { clear:both; }
</style>
</head>
<body>

<form name="testing" method="post" action="">
<div class="container">
    <h1> My Calculator</h1>
    <p><label>Input : </label><input type="number" name="input1" value="" onBlur="calculate(this.value);"/></p>
    <p><label>Output : </label><input type="number" name="output1" id="output1"></p>
</div>
</form>


</body>
</html>
于 2012-09-11T11:48:28.640 に答える