Question

当我使用内联javascript并创建外部js文件时，我不明白我做错了什么。无法让它发挥作用。当它全部在html中时它起作用但是当我移动它时我的按钮不再起作用。有人可以帮忙吗？

   $().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('');
    }


};

我的HTML代码是：

    <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>

Answer 1

确保你有

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

<head>

中的某个地方

否则该函数不知道$是什么。

Answer 2

可能是因为.js的导入一直在底部。

Answer 3

快速提示：如果您使用的是HTML5的<!DOCTYPE html>文档类型，则不必包含type='text/javascript'。你可以写：
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>

从内联javascript到外部文件，为什么不工作？

3 个答案: