0

したがって、同じページではなく別のページに情報を渡す方法を見つけることしかできません。これは完全にクライアント側で行う必要があります。これを使用するとインターネット接続がなくなるため、サーバー側は機能しません。接続が利用可能になったときに送信できるようにフォームデータ。

基本的に、2つのテーブルがあります。1つは左側にあり、ユーザーが必要に応じて変更できる標準の数値セット(フィールドtime1〜time8)があります。これらの値は合計して「designhours」フィールドになります。その数値は、そこで必要なさまざまな計算のために、右側の「designhours」フィールドに入力する必要があります。私の以前の仕事(HTMLやjavascriptではない)では、フィールド名が同じである場合、データが渡されましたが、ここでは明らかにそうではありません。

左側の表を入れる前に、このフォームはうまく機能しましたが、新しい「designhours」値を合計するオプションを追加する必要があります。以前私を助けてくれた人たちに感謝し、今助けてくれた人たちに感謝します。私はまだ学んでいますが、そこに着きつつあります。

ほとんどのフィールドが削除されたサンプルコード。これにより、私が行っていることを確認できます(指摘していただきありがとうございます)完全なコードは以下のとおりです...

したがって、左側の表のフィールド名

time1- time8これらの値は、合計を設計時間に入れるために追加されます

そして右のテーブル

賃金、インストラクター、クラス、designhours (左の表と同じ)、cost、many、atetextfield7、build_cost、buy_cost、build_hours、buy_hours、build_train、buy_train、build_total、buy_total

<script type="text/javascript">
var btn = document.getElementById('calculate');
btn.onclick = function() {
var wageval = parseInt(document.getElementById('wage').value) || 0;
var instructorsval = parseInt(document.getElementById('instructors').value) || 0;

var build_cost = document.getElementById('build_cost');
var buy_cost = document.getElementById('buy_cost');

var msg = [];

if (isNaN(wageval)) {
    msg.push('Average instructor hourly wage is not a number');
    // the value isn't a number
    }
if (isNaN(instructorsval)) {
    msg.push('Number of instructors per course is not a number');
    // the value isn't a number
        }

if (msg.length > 0)   {
    build_cost.value = msg.join(', ');
    buy_cost.value = msg.join(', ');

および以下の計算:

} else {
    designhours.value = (time1 + time2 + time3 + time4 + time5 + time6 + time7 + time8);
    build_cost.value = (wageval * designhoursval);
    buy_cost.value = (costval * hiddenval);
    build_hours.value = (designhoursval * manyval);
    build_train.value = (classval * hiddenval);
    build_total.value = (wageval * designhoursval * manyval + classval);
    buy_total.value = (costval * manyval);
    var build_costval = parseInt(build_cost.value) || 0;
    var buy_costval = parseInt(buy_cost.value) || 0;
    var build_hoursval = parseInt(build_hours.value) || 0;
    var build_trainval = parseInt(build_train.value) || 0;
    var build_totalval = parseInt(build_total.value) || 0;
    var buy_totalval = parseInt(buy_total.value) || 0;
    var designhoursval = parseInt(designhours.value) || 0;
}   

以下の完全なコード

HTML

<form id="form1" name="form1" method="post" action="mailto:?subject=Laerdal%20ROI%20Information" enctype="text/plain">
    <table width="859" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td valign="bottom">
                <table width="352" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="22" colspan="2">&nbsp;</td>
                    </tr>
                    <tr>
                        <td width="225" height="22">&nbsp;</td>
                        <td width="127" height="22" align="left">&nbsp;</td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Needs Analysis</span></td>
                        <td height="22" align="center"><input name="time1" type="text" class="field" id="time1" value="1" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Research</span></td>
                        <td height="22" align="center"><input name="time2" type="text" class="field" id="time2" value="2" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Design</span></td>
                        <td height="22" align="center"><input name="time3" type="text" class="field" id="time3" value="2" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Scenario Programming</span></td>
                        <td height="22" align="center"><input name="time4" type="text" class="field" id="time4" value="3" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Support Materials</span></td>
                        <td height="22" align="center"><input name="time5" type="text" class="field" id="time5" value="16" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Validation</span></td>
                        <td height="22" align="center"><input name="time6" type="text" class="field" id="time6" value="2" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Revision</span></td>
                        <td height="22" align="center"><input name="time7" type="text" class="field" id="time7" value="4" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Implementation</span></td>
                        <td height="22" align="center"><input name="time8" type="text" class="field" id="time8" value="2" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="22"><span class="norm">Total</span></td>
                        <td height="22" align="center"><input name="designhours" class="field" type="text" id="designhours" size="10" /></td>
                    </tr>
                    <tr>
                        <td height="73" colspan="2">&nbsp;</td>
                    </tr>
                </table>
                <p>&nbsp;</p></td>
            <td width="55" valign="bottom">&nbsp;</td>
            <td>
                <table width="440" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="36" colspan="2" align="right" class="norm">Average Instructor hourly wage:</td>
                        <td height="36" align="right"><input name="wage" class="field" type="text" id="wage" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="36" colspan="2" align="right" class="norm">Number of Instructors per course:</td>
                        <td height="36" align="right"><input name="instructors" class="field" type="text" id="instructors" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="36" colspan="2" align="right" class="norm">Scenario Programing Class:</td>
                        <td height="36" align="right"><input name="class" class="field" type="text" id="class" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="36" colspan="2" align="right" class="norm">Instruction design hours per scenarios:</td>
                        <td height="36" align="right"><input name="designhours" class="field" type="text" readonly="true" id="designhours" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="36" colspan="2" align="right" class="norm">Average cost of SimStore Scenarios:</td>
                        <td height="36" align="right"><input name="cost" class="field" type="text" id="cost" value="295" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="36" colspan="2" align="right" class="norm">How many scenarios do you need:</td>
                        <td height="36" align="right"><input name="many" class="field" type="text" id="many" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="36" colspan="2" align="right" class="norm">Date needed?:</td>
                        <td height="36" align="right"><input name="atetextfield7" class="field" type="text" id="atetextfield7" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="40" colspan="3" align="center" class="calc">CALCULATED RESULTS</td>
                    </tr>
                    <tr>
                        <td height="40"><input name="hidden" type="hidden" id="hidden" value="1" /></td>
                        <td height="40" align="center" class="bold">BUILD</td>
                        <td height="40" align="center" class="bold">BUY</td>
                    </tr>
                    <tr>
                        <td height="38" align="right" class="norm">Cost per scenario:<img src="images/Blank.png" alt="" width="12" height="5" /></td>
                        <td height="38" align="center"><input name="build_cost" class="field" type="text" id="build_cost" size="12" /></td>
                        <td height="38" align="center"><input name="buy_cost" class="field" type="text" id="buy_cost" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="38" align="right" class="norm">Total development hours:<img src="images/Blank.png" alt="" width="12" height="5" /></td>
                        <td height="38" align="center"><input name="build_hours" class="field" type="text" id="build_hours" size="12" /></td>
                        <td height="38" align="center"><input name="buy_hours" class="field" type="text" id="buy_hours" value="0" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="38" align="right" class="norm">
                            Scenario Programming<img src="images/Blank.png" alt="" width="12" height="5" /><br />
                            Training (8h):<img src="Blank.png" alt="" width="12" height="5" />
                        </td>
                        <td height="38" align="center"><input name="build_train" class="field" type="text" id="build_train" size="12" /></td>
                        <td height="38" align="center"><input name="buy_train" class="field" type="text" id="buy_train" value="0" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="38" align="right" class="norm">Total Cost:<img src="images/Blank.png" alt="" width="12" height="5" /></td>
                        <td height="38" align="center"><input name="build_total" class="field" type="text" id="build_total" size="12" /></td>
                        <td height="38" align="center"><input name="buy_total" class="field" type="text" id="buy_total" size="12" /></td>
                    </tr>
                    <tr>
                        <td height="50" colspan="3" align="center" valign="bottom"><input type="reset" />
                            <img src="images/Blank.png" alt="" width="15" height="25" />
                            <input name="calculate" type="button" id="calculate" value="Calculate" />
                            <img src="images/Blank.png" alt="" width="15" height="25" />
                            <input name="share" type="submit" id="submit" value="Share" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</form>

Javascript

var btn = document.getElementById('calculate');
btn.onclick = function () {
    //get the input values
    var wageval = parseInt(document.getElementById('wage').value) || 0;
    var instructorsval = parseInt(document.getElementById('instructors').value) || 0;
    var classval = parseInt(document.getElementById('class').value) || 0;
    var designhoursval = parseInt(document.getElementById('designhours').value) || 0;
    var costval = parseInt(document.getElementById('cost').value) || 0;
    var manyval = parseInt(document.getElementById('many').value) || 0;
    var hiddenval = parseInt(document.getElementById('hidden').value) || 0;
    var time1val = parseInt(document.getElementById('time1').value) || 0;
    var time2val = parseInt(document.getElementById('time2').value) || 0;
    var time3val = parseInt(document.getElementById('time3').value) || 0;
    var time4val = parseInt(document.getElementById('time4').value) || 0;
    var time5val = parseInt(document.getElementById('time5').value) || 0;
    var time6val = parseInt(document.getElementById('time6').value) || 0;
    var time7val = parseInt(document.getElementById('time7').value) || 0;
    var time8val = parseInt(document.getElementById('time8').value) || 0;
    // get the elements to hold the results
    var build_cost = document.getElementById('build_cost');
    var buy_cost = document.getElementById('buy_cost');
    var build_hours = document.getElementById('build_hours');
    var buy_hours = document.getElementById('buy_hours');
    var build_total = document.getElementById('build_total');
    var build_train = document.getElementById('build_train');
    var buy_total = document.getElementById('buy_total');
    var time1 = document.getElementById('time1');
    var time2 = document.getElementById('time1');
    var time3 = document.getElementById('time1');
    var time4 = document.getElementById('time1');
    var time5 = document.getElementById('time1');
    var time6 = document.getElementById('time1');
    var time7 = document.getElementById('time1');
    var time8 = document.getElementById('time1');
    var designhours = document.getElementById('designhours');
    // create an empty array to hold error messages
    var msg = [];
    // check each input value, and add an error message to the array if it's not a number
    if (isNaN(wageval)) {
        msg.push('Average instructor hourly wage is not a number');
        // the value isn't a number
    }
    if (isNaN(instructorsval)) {
        msg.push('Number of instructors per course is not a number');
        // the value isn't a number
    }
    if (isNaN(classval)) {
        msg.push('Scenario programming class is not a number');
        // the value isn't a number
    }
    if (isNaN(designhoursval)) {
        msg.push('Instruction design hours per scenario is not a number');
        // the value isn't a number
    }
    if (isNaN(costval)) {
        msg.push('Average cost of SimStore scenarios is not a number');
        // the value isn't a number
    }
    if (isNaN(manyval)) {
        msg.push('How many scenarios do you need is not a number');
        // the value isn't a number
    }
    if (isNaN(hiddenval)) {
        msg.push('joe messed up');
        // the value isn't a number
    }
    if (isNaN(time1val)) {
        msg.push('Needs Analysis is not a number');
        // the value isn't a number
    }
    if (isNaN(time2val)) {
        msg.push('Research is not a number');
        // the value isn't a number
    }
    if (isNaN(time3val)) {
        msg.push('Design is not a number');
        // the value isn't a number
    }
    if (isNaN(time4val)) {
        msg.push('Scenario Programming is not a number');
        // the value isn't a number
    }
    if (isNaN(time5val)) {
        msg.push('Support Materials is not a number');
        // the value isn't a number
    }
    if (isNaN(time6val)) {
        msg.push('Validation is not a number');
        // the value isn't a number
    }
    if (isNaN(time7val)) {
        msg.push('Revision is not a number');
        // the value isn't a number
    }
    if (isNaN(time8val)) {
        msg.push('Implementation is not a number');
        // the value isn't a number
    }
    // if the array contains any values, display an error message

    if (msg.length > 0)  {
        build_cost.value = msg.join(', ');
        buy_cost.value = msg.join(', ');
        build_hours.value = msg.join(', ');
        build_train.value = msg.join(', ');
        build_total.value = msg.join(', ');
        buy_total.value = msg.join(', ');
        time1.value = msg.join(', ');
        time2.value = msg.join(', ');
        time3.value = msg.join(', ');
        time4.value = msg.join(', ');
        time5.value = msg.join(', ');
        time6.value = msg.join(', ');
        time7.value = msg.join(', ');
        time8.value = msg.join(', ');
    } else {
        designhours.value = (time1 + time2 + time3 + time4 + time5 + time6 + time7 + time8);
        build_cost.value = (wageval * designhoursval);
        buy_cost.value = (costval * hiddenval);
        build_hours.value = (designhoursval * manyval);
        build_train.value = (classval * hiddenval);
        build_total.value = (wageval * designhoursval * manyval + classval);
        buy_total.value = (costval * manyval);
        var build_costval = parseInt(build_cost.value) || 0;
        var buy_costval = parseInt(buy_cost.value) || 0;
        var build_hoursval = parseInt(build_hours.value) || 0;
        var build_trainval = parseInt(build_train.value) || 0;
        var build_totalval = parseInt(build_total.value) || 0;
        var buy_totalval = parseInt(buy_total.value) || 0;
        var designhoursval = parseInt(designhours.value) || 0;
    }
};

誰でもできるガイダンスをありがとう。私はこれらすべてに苦労しています。

4

2 に答える 2

1

まず第一に、これらが何のためにあるのか分かりません:

var time1 = document.getElementById('time1');
var time2 = document.getElementById('time1');
var time3 = document.getElementById('time1');
var time4 = document.getElementById('time1');
var time5 = document.getElementById('time1');
var time6 = document.getElementById('time1');
var time7 = document.getElementById('time1');
var time8 = document.getElementById('time1');

次に、timexのvarとしての要素のみがあります。

したがって、最も簡単な修正は次のとおりです。
designhours.value = time1val + time2val + time3val + time4val + time5val + time6val + time7val + time8val;

それ以外の:
designhours.value = time1 + time2 + time3 + time4 + time5 + time8 + time7 + time8;

どこが間違っていたのか分かりますか?オブジェクト(入力フィールド)を一緒に追加していましたが、それらの値(すでに開始しなければならなかった)ではありませんでした。
また、入力フィールドの数字は数字ではなく文字列であることに注意してください。
また、次のようなparseIntで基数を指定することもできます。parseInt(val,10);

最後に、コードをかなりリファクタリングすることができます。これは確かに少し多くなります(ただし、有用なエラー検出を提供するのに適しています)。

このフィドルを参照してください:http://jsfiddle.net/4nHvc/1/

更新:さらに詳しく調べると、さらに多くの間違いがあります。これらの関数のローカル変数が関数の最後に設定されているのはなぜですか?

var build_costval = parseInt(build_cost.value) || 0;
var buy_costval = parseInt(buy_cost.value) || 0;
var build_hoursval = parseInt(build_hours.value) || 0;
var build_trainval = parseInt(build_train.value) || 0;
var build_totalval = parseInt(build_total.value) || 0;
var buy_totalval = parseInt(buy_total.value) || 0;
var designhoursval = parseInt(designhours.value) || 0;

間違った変数名を使用した(したがって、値の代わりにオブジェクトを追加した)最初の行の次の行は、次のいずれかでも機能しません。
build_cost.value = (wageval * designhoursval);

コードの先頭でinputfielddesignhoursvalの値を取得した場合、そのフィールドはまだ空です。したがって、スクリプトが上記の行を実行すると、designhoursval???は何になりますか。右、空。たとえば、変数宣言なしで「役に立たない」コードの最後のブロックを使用してその値を再読み取りしvar(関数の開始時にすでに宣言している)、その行の上に配置すると、電卓の別のフィールドが機能し始めます:

designhoursval = parseInt(designhours.value) || 0;
build_cost.value = (wageval * designhoursval);

しかし、..最初にすべての入力値を取得し、計算を行ってから、値を出力する方が簡単ではありませんか?

このフィドルを参照してください。今ではほとんど機能しています:http://jsfiddle.net/4nHvc/2/

于 2013-01-15T01:15:55.590 に答える
0

時間の値を更新します...

var time1 = parseInt(document.getElementById('time1').value);
var time2 = parseInt(document.getElementById('time1').value);
var time3 = parseInt(document.getElementById('time1').value);
var time4 = parseInt(document.getElementById('time1').value);
var time5 = parseInt(document.getElementById('time1').value);
var time6 = parseInt(document.getElementById('time1').value);
var time7 = parseInt(document.getElementById('time1').value);
var time8 = parseInt(document.getElementById('time1').value);

また、ボタンをスクリプトにどのように接続したかわからないため、関数を変更しました...

function doThis() {

とあなたのボタン...

<input name="calculate" type="button" id="calculate" value="Calculate" onclick="doThis()" />

これらはコードでは問題ないかもしれませんが、その部分は投稿で省略されているので、チェックしてください。(「alert('foo');」を使用して確認できます。)

于 2013-01-15T01:32:33.513 に答える