CODEWITHSUNDEEP
javascripthtml
Sara
Sara

Reputation: 1

from inline javascript to external file, why wont it work?

I do not understand what I did wrong when I took the inline javascript and created an external js file. can not get it to work. it worked when it was all in the html but when I moved it my buttons no longer work. can anyone help?

   $().ready(init);


function init()
{

    $j('.num button:not(:contains(+/-),:contains(.))').click( addDigit );
    $j('.num button:contains(.)').click( addDecimal );
    $j('.num button:contains(+/-)').click( switchSign );

    $j('.operator button:not(:contains(=),:contains(C))').click( applyOperator );
    $j('.operator button:contains(=)').click( displayResult );
    $j('.operator button:contains(C)').click( clearInput );
}





function addDigit()
{
    Screen.append( $j(this).text() );
}


function addDecimal()
{
    var Input = Screen.readValue().split(' ');

    var FinalExpr = Input[ Input.length-1 ];

    Input[ Input.length-1 ] = FinalExpr.replace('\.','') + '.';

    Screen.set( Input.join(' ') );
}


function switchSign()
{
    var Input = Screen.readValue().split(' ');

    var FinalExpr = Input[ Input.length-1 ];

    if ( FinalExpr.charAt(0) == '-')
    {
        FinalExpr = FinalExpr.substring( 1 , FinalExpr.length );
    }
    else
    {
        FinalExpr = '-' + FinalExpr;
    }

    Input[ Input.length-1 ] = FinalExpr;

    Screen.set( Input.join(' ') );
}


function applyOperator()
{
    Screen.append( ' '+$j(this).text()+' ' );
}


function displayResult()
{
    Screen.displayResult();
}


function clearInput()
{
    Screen.clear();
}


var Screen =
{
    init:
    function()
    {
        return this;
    }

    , ScreenSelector : '.results input:text'
    , ResetNextAppend : true


    , set:
    function( value )
    {
        $j(this.ScreenSelector).val( value );
    }


    , append:
    function( value )
    {
        if (this.ResetNextAppend == true || $j(this.ScreenSelector).val() == 0)
        {
            if ( value.substring(0,1).search(/\d/) != -1 )
            {
                this.clear();
            }
            this.ResetNextAppend = false;
            $j(this.ScreenSelector).removeClass('rna');
        };

        $j(this.ScreenSelector).val( $j(this.ScreenSelector).val() + value );
    }


    , readValue:
    function()
    {
        return $j(this.ScreenSelector).val();
    }


    , readResult:
    function()
    {
        return this.calculate( this.readValue() );
    }

    , displayResult:
    function()
    {
        this.ResetNextAppend = true;
        $j(this.ScreenSelector).addClass('rna');        

        $j(this.ScreenSelector).val( this.readResult() );
    }


    , calculate:
    function( expression )
    {
        return eval( this.convertChars( expression ) );
    }

    , convertChars:
    function( text )
    {
        text = text.replace(String.fromCharCode(215),'*');
        text = text.replace(String.fromCharCode(247),'/');

        return text;
    }


    , clear:
    function()
    {
        this.ResetNextAppend = false;
        $j(this.ScreenSelector).removeClass('rna');

        $j(this.ScreenSelector).val('');
    }


};

and my HTML code is:

    <link rel="stylesheet" type="text/css" href="A05ReDoCSS.css">   
</head>
<body>
<h1>Sara's Calculator</h1>
<div id="A05">
<fieldset class="results"> <!-- use of fieldset keeps out  a bunch of divs -->
<input type="text"/>
</fieldset>
<fieldset class="num pad">
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
<button type="button">4</button>
<button type="button">5</button>
<button type="button">6</button>
<button type="button">7</button>
<button type="button">8</button>
<button type="button">9</button>
<button type="button">0</button>
<button type="button">+/-</button> <!-- switch -->
<button type="button">.</button>
</fieldset>
<fieldset class="operator pad"> <!-- this is the operations area -->
<button type="button">+</button>
<button type="button">-</button>
<button type="button">&times;</button>
<button type="button">&divide;</button>
<button type="button">=</button>
<button type="button">C</button>
</fieldset>
</div>
<br class="break"/>
<script type="text/javascript" src="A05ReDoJS.js"></script>
</body>
</html>

Upvotes: 0

Views: 240

Answers (3)

Mihail Ivanov
Mihail Ivanov

Reputation: 1

Quick tip: If you are using HTML5's doctype which is <!DOCTYPE html> you don't have to include type='text/javascript'. You can just write:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>

Upvotes: 0

Jake Zeitz
Jake Zeitz

Reputation: 2564

Make sure you have 

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>

Somewhere in the <head>

Otherwise that function does not know what $ is.

Upvotes: 1

Scott Shipp
Scott Shipp

Reputation: 2301

Could be due to the import for the .js being all the way at the bottom.

Upvotes: 0

Related Questions