2. ボタンクリックでの再計算

index.htm

変更は JavaScript 部分のみ．

        <script>
            "use strict";

            function    calc_x    () {

                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 ;

                }

            function    c_input        ()    {
                calc_x        () ;
                }

            function    x_click        ()    {
                calc_x        () ;
                }

            function    main    ()    {

                let    cx = document.getElementById("cal_x") ;
                let    ic = document.getElementById("in__c") ;

                cx.addEventListener("click",x_click, false) ;
                ic.addEventListener("input",c_input, false) ;

                calc_x    () ;

                }

            {
                main    () ;
                }

            </script>

x の計算部分の関数化と，x ボタンと C の入力に反応する様に EventListener を登録．