Thursday, 4 May 2017

javascript radio buttons, dropdowns, hide

Solar system

select object type for calculating volume

cube
cylinder

Temperature converter




//index.html

<!DOCTYPE html>
<html>
<head>
    <title>Solar system</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="javascript.js"></script>
</head>

<body>

    <div>
        <h2>select object type for calculating volume</h2>
        <input type="radio" name="object_type" value="cube" onclick="object_type_selector()" />cube <br />
        <input type="radio" name="object_type" value="cylinder" onclick="object_type_selector()" />cylinder <br />
    </div>

    <div id="cube_calculator" style="display:none">
        <h2>Dimensions of a cube</h2>
        <table>
            <thead>
                <tr>
                    <td>Length (ft)</td>
                    <td>Width (ft)</td>
                    <td>Height (ft)</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="number" id="cube_length" /></td>
                    <td><input type="number" id="cube_width" /></td>
                    <td><input type="number" id="cube_height" /></td>
                </tr>
                <tr>
                    <td colspan="3">
                        <input type="button" value="calculate volume" onclick="cube_cal()" style="width:100%" />
                    </td>
                </tr>
                <tr>
                    <td style="text-align:right">Volume = </td>
                    <td style="text-align:center"><span id="cube_volume" /></td>
                    <td>ft<sup>3</sup></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="cylinder_calculator" style="display:none">
        <h2>Dimensions of cylinder</h2>
        <table>
            <thead>
                <tr>
                    <td>radius (ft)</td>
                    <td>height (ft)</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="number" id="cylinder_radius" /></td>
                    <td><input type="number" id="cylinder_height" /></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button" value="calculate volume" onclick="cylinder_cal()" style="width:100%" />
                    </td>
                </tr>
                <tr>
                    <td style="text-align:center">Volume =</td>
                    <td style="text-align:center">
                        <span id="cylinder_volume"></span>
                        <span> ft<sup>3</sup></span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <hr />

    <div>
        <h2>Temperature converter</h2>
        <span><input type="number" id="temperature1" /></span>
        <select id="select_method" onchange="temperature_convert()">
            <option selected="selected">Choose coversion method</option>
            <option value="c_f">Celsius to Fahrenheit</option>
            <option value="f_c">Fahrenheit to Celsius</option>
        </select>
        <span id="temperature2"></span>
    </div>
</body>

</html>

-------------------------------------------------------------------

//javascript.js


function object_type_selector() {
    var types = document.getElementsByName("object_type");
    var selected_type;

    var cube_calculator = document.getElementById("cube_calculator");
    var cylinder_calculator = document.getElementById("cylinder_calculator");

    for (var i = 0; i < types.length; i++) {
        if (types[i].checked) { selected_type = types[i].value; }
    }

    if (selected_type == "cylinder") {
        cylinder_calculator.style.display = "block";
        cube_calculator.style.display = "none";
    }
    else {
        cylinder_calculator.style.display = "none";
        cube_calculator.style.display = "block";
    }
}

function cube_cal() {
    var l = document.getElementById("cube_length").value;
    var w = document.getElementById("cube_width").value;
    var h = document.getElementById("cube_height").value;

    var l = parseFloat(l);
    var w = parseFloat(w);
    var h = parseFloat(h);

    document.getElementById("cube_volume").innerHTML = (l * w * h).toFixed(2);
}

function cylinder_cal() {
    var r = document.getElementById("cylinder_radius").value;
    var h1 = document.getElementById("cylinder_height").value;

    var r = parseFloat(r);
    var h1 = parseFloat(h1);

    document.getElementById("cylinder_volume").innerHTML = (Math.PI * Math.pow(r, 2) * h1).toFixed(2);
}

function temperature_convert() {
    var t = document.getElementById("temperature1").value;
    var methods = document.getElementById("select_method");
    var selected_method = methods.options[methods.selectedIndex].value;

    var t = parseFloat(t);

    if (selected_method == "c_f") {
        document.getElementById("temperature2").innerHTML = (t * 9 / 5 + 32).toFixed(2);
    }

    if (selected_method == "f_c") {
        document.getElementById("temperature2").innerHTML = (5 / 9 * (t - 32)).toFixed(2);
    }
}

reference:

http://stackoverflow.com/questions/1423777/how-can-i-check-whether-a-radio-button-is-selected-with-javascript
http://stackoverflow.com/questions/6242976/javascript-hide-show-element
http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript
http://stackoverflow.com/questions/2928688/how-to-hide-elements-without-having-them-take-space-on-the-page
https://www.w3schools.com/jsref/jsref_pi.asp
http://chuanshuoge2.blogspot.ca/2017/03/add-html-to-blog.html

No comments:

Post a Comment