index.htm


body のi入力欄などの定義.

        <div    align='center'>
            <table    border='0'>
                <tr>
                    <td>

                        <span    align="center">A : B = C : x</span><br/>
                        <hr/>
                            A <input    type='number'    id='in__a'    value='25'     style='width:80px;'    step='any'    />    <br />
                            B <input    type='number'    id='in__b'    value='1'      style='width:80px;'    step='any'    />    <br />
                            C <input    type='number'    id='in__c'    value='500'    style='width:80px;'    step='any'    />    <br />
                        <hr/>
                              <input    type='submit'    id='cal_x'    value='&ensp; x &ensp;'/>&emsp;<span    id='out_x'> </span>

                        </td>
                    </tr>
                </table>

            <hr/>
            <br/>

            </div>


JavaScript 部分

        <script>
            "use strict";

            function    main    ()    {

                let    ia = document.getElementById("in__a") ;
                let    ib = document.getElementById("in__b") ;
                let    ic = document.getElementById("in__c") ;

                let    va = ia.value ;
                let    vb = ib.value ;
                let    vc = ic.value ;

                let    ox = document.querySelector("#out_x") ;
                let    rx = vc * vb / va ;
                ox.textContent = rx ;

                }

            {
                main    () ;
                }

            </script>


script が一切ない状態では,x の結果の表示はブランク.
ページが表示(またはリフレッシュ)された時,script の main 関数が順に処理され,C * B / A の結果が x の出力として表示される.