Naa rah kuy pangutana unsay akong angay buhatun

**akocdiego** · 04-21-2012, 01:29 AM

Dli ko i.t., comsci or comp e ....nag download lng ko ug pdf aning html,css ug javascript kay na intriga ko ug nakat-on tawn ko gamay.

Naghimo ko ug calcu dri sah akong html file...mo gana man pero akong ganahan kay kung mo type kah ug letters(a to z) instead of integers mo error cya. nasabtan nako gamay ang alert ug if statement pero ga libug ko asa ni nako i butang.

<html>
<body>

<center>
<form name=bruce>
<table border="1"><tr>

<td colspan="3" width="75%"><input name="wayne" type="text">
<td width="25%"><input type="button" style="height: 25px; width: 50px" onClick="document.bruce.wayne.value=''" value="C">
</tr>

<tr>
<td width="25%" align="center" ><input type="button" style="height: 25px; width: 50px" onClick="document.bruce.wayne.value+='1'" value="1">
<td width="25%"><input type="button" style="height: 25px; width: 50px" onClick="document.bruce.wayne.value+='2'" value="2">
<td width="25%"><input type="button" style="height: 25px; width: 50px" onClick="document.bruce.wayne.value+='3'" value="3">
<td width="25%"><input type="button" style="height: 25px; width: 50px" onClick="document.bruce.wayne.value+='+'" value="+">
</tr>

<tr>
<td width="25%"><input type="button" style="height: 25px; width: 50px" style="height: 25px; width: 50px" onClick="document.bruce.wayne.value+='4'" value="4">
<td width="25%"><input type="button" style="height: 25px; width: 50px" style="height: 25px; width: 50px" onClick="document.bruce.wayne.value+='5'" value="5">
<td width="25%"><input type="button" style="height: 25px; width: 50px" onClick="document.bruce.wayne.value+='6'" value="6">
<td width="25%"><input type="button" style="height: 25px; width: 50px" onClick="document.bruce.wayne.value+='-'" value="-">
</tr>

<tr>
<td width="25%"><input type="button" style="height: 25px; width: 50px" onClick="document.bruce.wayne.value+='7'" value="7">
<td width="25%"><input type="button" style="height: 25px; width: 50px" onClick="document.bruce.wayne.value+='8'" value="8">
<td width="25%"><input type="button" style="height: 25px; width: 50px" onClick="document.bruce.wayne.value+='9'" value="9">
<td width="25%"><input type="button" style="height: 25px; width: 50px" onClick="document.bruce.wayne.value+='*'" value="*">
</tr>

<tr>
<td width="25%"><input type="button" style="height: 25px; width: 50px" onClick="document.bruce.wayne.value+='.'" value=".">
<td width="25%"><input type="button" style="height: 25px; width: 50px" onClick="document.bruce.wayne.value+='0'" value="0">
<td width="25%"><input type="button" style="height: 25px; width: 50px" onClick="document.bruce.wayne.value=eval(bruce.way ne.value);" value="=">
<td width="25%"><input type="button" style="height: 25px; width: 50px" onClick="document.bruce.wayne.value+='/'" value="/">
</tr>
<table>

</body>
</html>

**Rickstar13** · 04-21-2012, 05:44 AM

e google lng bro. unya gamiti og javascript bro sa iyang onkeydown event e butang ang imong function.

kaya ra na nimo. naa ra na daghan sa google. hehe.

kung naa kay pangutana paningkamote sa og search sa google. kay mas dali ka makat.on kung in.ani nga style.

**boang3000** · 04-21-2012, 09:55 AM

ibutang sa <head>

<script>
function numbersOnly(evt){
var numbah = (evt.which) ? evt.which : event.keyCode
if (numbah > 31 && (numbah < 48 || numbah > 57)){
return false;
}
return true;
}
</script>

sa <body>
<input type="text" onkeypress="return numbersOnly(event)" />

try dw ni? d ko sure sa 31 48 57 mga ascii code bay tawag ana limot ko bsta ang gamit sa mga numbers kay iyang ge restrict ang letters a-z, special characters. d ko sure..

try lng sd og google haha

**akocdiego** · 04-21-2012, 10:58 AM

salamat sa inyung tabang, ni gana nah pero...nka sabot nako sah charCode pero wa ko ka gets aning evt. ug nganu false ang return...kinsa tuy mka explain dha ug bisaya fayts kaau

<head>

<script>

function numbersOnly(evt){

var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;

}
</script>
</head>

<body>

<input type="text" onKeypress="return numbersOnly(event)">

**boang3000** · 04-22-2012, 11:30 AM

evt mao na imong parameter. ang parameter kay values or variables nga e pass sa functions.

(d ko khbw mo explain raba)
return false pra ma indicate nia ang ge tawag nmo nga function ddto sa imong html tag haha sakto ba pgka explain?

**darkhero** · 04-22-2012, 03:53 PM

improved code with additional comments...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta http-equiv="content-language" content="en">

        <title>Calculator</title>

        <style type="text/css">
            table.calculator {
                margin: 0 auto;
            }

            td.input {
                width: 75%;
                text-align: center;
            }

            td.button {
                width: 25%;
            }

            td.button input {
                height: 25px;
                width: 50px;
            }
        </style>

        <script type="text/javascript">
            function buttonClick(button) {
                // Add the pressed button's value to input
                document.calculator.input.value += button.value;
            }

            function clearInput() {
                // Clear input
                document.calculator.input.value = '';
            }

            function calculateInput() {
                // Evaluate input
                document.calculator.input.value = eval(document.calculator.input.value);
            }

            function validateInputKey(e) {
                // Get the character code from the event object depending which browser is used.
                var asc = (e.which) ? e.which : event.keyCode;

                // If the character code is for the <ENTER> key or the equals sign then perform the calculation.
                if (asc == 13 || asc == 61) {
                    calculateInput();

                    // Return false so that the default browser behaviour for this event wont be called.
                    return false;
                }

                // Get string character from the character code.
                var chr = String.fromCharCode(asc);

                // Validates numeric characters, operators, backspace key, and the period character.
                return isNumber(chr) || isOperator(chr) || asc == 8 || asc == 46;
            }

            function isNumber(input) {
                // If the return value of parseFloat is a number and it is finite then it is a number.
                return !isNaN(parseFloat(input)) && isFinite(input);
            }

            function isOperator(input) {
                // If the position (index) of the input string is within "*/+-" then indexOf will
                // return the position (index) of the input string otherwise it will return negative one.
                // Thus we can use the equality of indexOf and -1, meaning if input is within "*/+-" then
                // return true otherwise return false.
                return "*/+-".indexOf(input) != -1;
            }
        </script>
    </head>
    <body>
        <form name="calculator" action="">
            <table border="1" class="calculator">
                <tr>
                    <td class="input" colspan="3" ><input name="input" type="text" onKeypress="return validateInputKey(event)"></td>
                    <td class="button"><input type="button" onClick="clearInput()" value="C"></td>
                </tr>

                <tr>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="1"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="2"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="3"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="+"></td>
                </tr>

                <tr>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="4"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="5"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="6"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="-"></td>
                </tr>

                <tr>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="7"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="8"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="9"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="*"></td>
                </tr>

                <tr>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="."></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="0"></td>
                    <td class="button"><input type="button" onClick="calculateInput()" value="="></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="/"></td>
                </tr>
            </table>
        </form>
    </body>
</html>

**akocdiego** · 04-22-2012, 09:13 PM

Originally Posted by darkhero

improved code with additional comments...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta http-equiv="content-language" content="en">

        <title>Calculator</title>

        <style type="text/css">
            table.calculator {
                margin: 0 auto;
            }

            td.input {
                width: 75%;
                text-align: center;
            }

            td.button {
                width: 25%;
            }

            td.button input {
                height: 25px;
                width: 50px;
            }
        </style>

        <script type="text/javascript">
            function buttonClick(button) {
                // Add the pressed button's value to input
                document.calculator.input.value += button.value;
            }

            function clearInput() {
                // Clear input
                document.calculator.input.value = '';
            }

            function calculateInput() {
                // Evaluate input
                document.calculator.input.value = eval(document.calculator.input.value);
            }

            function validateInputKey(e) {
                // Get the character code from the event object depending which browser is used.
                var asc = (e.which) ? e.which : event.keyCode;

                // If the character code is for the <ENTER> key or the equals sign then perform the calculation.
                if (asc == 13 || asc == 61) {
                    calculateInput();

                    // Return false so that the default browser behaviour for this event wont be called.
                    return false;
                }

                // Get string character from the character code.
                var chr = String.fromCharCode(asc);

                // Validates numeric characters, operators, backspace key, and the period character.
                return isNumber(chr) || isOperator(chr) || asc == 8 || asc == 46;
            }

            function isNumber(input) {
                // If the return value of parseFloat is a number and it is finite then it is a number.
                return !isNaN(parseFloat(input)) && isFinite(input);
            }

            function isOperator(input) {
                // If the position (index) of the input string is within "*/+-" then indexOf will
                // return the position (index) of the input string otherwise it will return negative one.
                // Thus we can use the equality of indexOf and -1, meaning if input is within "*/+-" then
                // return true otherwise return false.
                return "*/+-".indexOf(input) != -1;
            }
        </script>
    </head>
    <body>
        <form name="calculator" action="">
            <table border="1" class="calculator">
                <tr>
                    <td class="input" colspan="3" ><input name="input" type="text" onKeypress="return validateInputKey(event)"></td>
                    <td class="button"><input type="button" onClick="clearInput()" value="C"></td>
                </tr>

                <tr>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="1"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="2"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="3"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="+"></td>
                </tr>

                <tr>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="4"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="5"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="6"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="-"></td>
                </tr>

                <tr>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="7"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="8"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="9"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="*"></td>
                </tr>

                <tr>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="."></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="0"></td>
                    <td class="button"><input type="button" onClick="calculateInput()" value="="></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="/"></td>
                </tr>
            </table>
        </form>
    </body>
</html>

kasabot nako gamay....salamat ani sir

**boang3000** · 04-24-2012, 09:32 AM

Originally Posted by darkhero

improved code with additional comments...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta http-equiv="content-language" content="en">

        <title>Calculator</title>

        <style type="text/css">
            table.calculator {
                margin: 0 auto;
            }

            td.input {
                width: 75%;
                text-align: center;
            }

            td.button {
                width: 25%;
            }

            td.button input {
                height: 25px;
                width: 50px;
            }
        </style>

        <script type="text/javascript">
            function buttonClick(button) {
                // Add the pressed button's value to input
                document.calculator.input.value += button.value;
            }

            function clearInput() {
                // Clear input
                document.calculator.input.value = '';
            }

            function calculateInput() {
                // Evaluate input
                document.calculator.input.value = eval(document.calculator.input.value);
            }

            function validateInputKey(e) {
                // Get the character code from the event object depending which browser is used.
                var asc = (e.which) ? e.which : event.keyCode;

                // If the character code is for the <ENTER> key or the equals sign then perform the calculation.
                if (asc == 13 || asc == 61) {
                    calculateInput();

                    // Return false so that the default browser behaviour for this event wont be called.
                    return false;
                }

                // Get string character from the character code.
                var chr = String.fromCharCode(asc);

                // Validates numeric characters, operators, backspace key, and the period character.
                return isNumber(chr) || isOperator(chr) || asc == 8 || asc == 46;
            }

            function isNumber(input) {
                // If the return value of parseFloat is a number and it is finite then it is a number.
                return !isNaN(parseFloat(input)) && isFinite(input);
            }

            function isOperator(input) {
                // If the position (index) of the input string is within "*/+-" then indexOf will
                // return the position (index) of the input string otherwise it will return negative one.
                // Thus we can use the equality of indexOf and -1, meaning if input is within "*/+-" then
                // return true otherwise return false.
                return "*/+-".indexOf(input) != -1;
            }
        </script>
    </head>
    <body>
        <form name="calculator" action="">
            <table border="1" class="calculator">
                <tr>
                    <td class="input" colspan="3" ><input name="input" type="text" onKeypress="return validateInputKey(event)"></td>
                    <td class="button"><input type="button" onClick="clearInput()" value="C"></td>
                </tr>

                <tr>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="1"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="2"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="3"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="+"></td>
                </tr>

                <tr>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="4"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="5"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="6"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="-"></td>
                </tr>

                <tr>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="7"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="8"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="9"></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="*"></td>
                </tr>

                <tr>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="."></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="0"></td>
                    <td class="button"><input type="button" onClick="calculateInput()" value="="></td>
                    <td class="button"><input type="button" onClick="buttonClick(this)" value="/"></td>
                </tr>
            </table>
        </form>
    </body>
</html>

kana calcu na jd kaayo. :>

Thread: Naa rah kuy pangutana unsay akong angay buhatun

Thread Tools

Search Thread