Vh/Vw calculator

Vh/Vwを計算するためにVh/Vw calculatorを構築。自分用にメモとして。

HTML

<div class="container">
    <h1>Vh/Vw calculator</h1>
    <form>
        <div class="form-group row text-md-right">
            <label for="txtScreenX" class="col-sm-2 col-form-label text-right">X:</label>
            <div class="col-sm-4">
                <input type="number" class="form-control text-right" id="txtScreenX">
            </div>
            <label for="txtScreenY" class="col-sm-2 col-form-label text-right">Y：</label>
            <div class="col-sm-4">
                <input type="number" class="form-control text-right" id="txtScreenY">
            </div>
        </div>
        <hr>
        <div class="form-group row ">
            <label for="txtX" class="col-sm-2 col-form-label text-right">X:</label>
            <div class="col-sm-3">
                <input type="number" class="form-control text-right" id="txtX">
            </div>
            <label for="txtLeft" class="col-sm-2 col-form-label text-right">Left:</label>
            <div class="col-sm-3">
                <input type="number" class="form-control text-right" id="txtLeft">
            </div>
            <label for="vw1" class="col-sm-2 col-form-label ">vw</label>
        </div>
        <div class="form-group row">
            <label for="txtY" class="col-sm-2 col-form-label text-right">Y:</label>
            <div class="col-sm-3">
                <input type="number" class="form-control text-right" id="txtY">
            </div>
            <label for="txtTop" class="col-sm-2 col-form-label text-right">Top:</label>
            <div class="col-sm-3">
                <input type="number" class="form-control text-right" text-right id="txtTop">
            </div>
            <label for="vh1" class=" col-sm-2 col-form-label ">vh</label>
        </div>
        <div class="form-group row">
            <label for="txtwidth" class="col-sm-2 col-form-label text-right">Width:</label>
            <div class="col-sm-3">
                <input type="number" class="form-control text-right" id="txtwidth">
            </div>
            <label for="widthvw" class="col-sm-2 col-form-label text-right">Width:</label>
            <div class="col-sm-3">
                <input type="number" class="form-control text-right" id="widthvw">
            </div>
            <label for="vw2" class="col-sm-2 col-form-label">vw</label>
        </div>
        <div class="form-group row">
            <label for="txtheight" class="col-sm-2 col-form-label text-right">Height:</label>
            <div class="col-sm-3">
                <input type="number" class="form-control text-right" id="txtheight">
            </div>
            <label for="heightvh" class="col-sm-2 col-form-label text-right">Height:</label>
            <div class="col-sm-3">
                <input type="number" class="form-control text-right" id="heightvh">
            </div>
            <label for="vh2" class="col-sm-2 col-form-label">vh</label>
        </div>
        <div class="form-group row">
            <label for="resultForm" class="col-sm-2 col-form-label text-right">Style</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="resultForm" onfocus="this.select()">
            </div>
        </div>
    </form>
</div>

JS

//6つの入力フォームの値を取得
var txtScreenX = document.getElementById("txtScreenX");
var txtScreenY = document.getElementById("txtScreenY");
var txtX = document.getElementById("txtX");
var txtY = document.getElementById("txtY");
var txtwidth = document.getElementById("txtwidth");
var txtheight = document.getElementById("txtheight");

//割り算の結果を別に入力フォームに表示
var txtLeft = document.getElementById("txtLeft");
var txtTop = document.getElementById("txtTop");
var widthvw = document.getElementById("widthvw");
var heightvh = document.getElementById("heightvh");
var resultForm = document.getElementById("resultForm");

// 1行が計算できるか
function canCalc(leftText, baseValue) {
    // TODO: ２つが数値だったらtrueを返す
    // leftTextが数値 かつ baseValueが数値 だったらtrueを返す
    return isNumber(leftText) && isNumber(baseValue);
}
// 数値かどうか
function isNumber(text) {
    return !isNaN(text) && isFinite(text);
}


//計算する
function cal() {
    var styleString = "";
    console.log("実行されてる");
    // styleに反映する文字列
    var styleString;
    // 左に値がある＆数値のとき

    //left
    if (canCalc(txtX.value, txtScreenX.value)) {
        // 計算する
        var left = ((txtX.value / txtScreenX.value) * 100);
        // 値をセット
        txtLeft.value = left;
        // styleにも反映
        styleString += 'left: ' + left + 'vw; ';
    }

    //top
    if (canCalc(txtY.value, txtScreenY.value)) {
        // 計算する
        var top = ((txtY.value / txtScreenY.value) * 100);
        // 値をセット
        txtTop.value = top;
        // styleにも反映
        styleString += 'top: ' + top + 'vh; ';
    }

    //Width
    if (canCalc(txtwidth.value, widthvw.value)) {
        // 計算する
        var width = ((txtwidth.value / txtScreenX.value) * 100);
        // 値をセット
        widthvw.value = width;
        // styleにも反映
        styleString += 'width: ' + width + 'vw; ';
    }

    //height
    if (canCalc(txtheight.value, heightvh.value)) {
        // 計算する
        var height = ((txtheight.value / txtScreenY.value) * 100);
        // 値をセット
        heightvh.value = height;
        // styleにも反映
        styleString += 'height: ' + height + 'vh;';
    }

    //styleに全部まとめる
    resultForm.value = styleString;
    console.log(styleString);
}


//数字が変更されたからonChangeが働いて結果の数値がかわる
//addEventListener( 種類, 関数, false )
txtScreenX.addEventListener('change', cal, false);
txtScreenY.addEventListener('change', cal, false);
txtX.addEventListener('change', cal, false);
txtY.addEventListener('change', cal, false);
txtwidth.addEventListener('change', cal, false);
txtheight.addEventListener('change', cal, false);