My HTML:

```
    <html>
    <head>
        <title>Circles!</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
        <script type="text/javascript" src="math.js"></script>
    </head>
    <body>
        <div id="header">
            <h1>The area of a circle given the circumfrence</h1>
        </div>
        <div id="group">      
            <input type="text" id="input">
            <label>Circumfrence</label>
            <button type="button" id="button">Calculate</button>
       </div>
       <div id="answerbox"><span id="answer"></span></div>
    </body>
</html>

```

and my js:

```
    $( document ).ready(function() {

        $("#button").click(function() {
            var input = $("#input").val;
            var answer = (((input * input) * Math.PI) * 0.25);
            $(answer).append("#answer")
            $("#answerbox").fadeIn(700);
        });
    });

```

So the 'answer' value wont display in my 'answer' span, which is inside my 'answerbox' div. What is wrong here?