javascript内の var name = $("#in").val(); の部分で、
#inへの入力があるにも関わらずCannot read property 'val' of nullになってしまいます。

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    </head>
    <body>
    <script src="createUrl.js"></script>
    <span>
        入力欄
        <input type="text" id="in">
        <input type="button" value="OK" onclick="x()">
        <br>
        <br>
    </span>

    <span>
        表示欄
        <input type="text" id="out" size="100">
    </span>
    </body>
    </html>

    *javascript 
    // okボタン押下時イベント
    function x() {
    // id=inのテキストボックス取得
    var name = $("#in").val();
    // ホスト名取得
    var localhost = window.location.host;
    // 取得した入力を基に、URL作成
    var url = "http://fujimicwapi.azurewebsites.net/api/MstUsers";
    // 表示欄にjsonのデータを出力
    $.get(url, { serchStr: name }, function (data) {
        $("#out").val(JSON.stringify(data));
    });
    }
    function $(tagId)
    {
        return document.getElementById(tagId);
    }

解決方法が分かりません。
解決方法の分かる方がいましたら、ご教授をお願いします。