Javascript + Google Visualization API无法正确解释文本框值

Question

我一直在尝试使用Google的漂亮可视化来自动化这个小家谱树脚本，但我一直遇到一个奇怪的问题。看看我下面的代码，我有一个简单的表单，它带有一个数字，表示树的父级的id号，然后调用draw函数。奇怪的是，如果我只是在函数本身中输入值5，它就会很好地绘制，但是只要我从文本框中使用函数调用获取该数字，它就会失败！

<form action="#" name="tree">
<input class="textBox" id="enteredPin" type="text" maxlength="3"/>
<input type="button" value="Get Tree" onclick="drawChart(document.tree.enteredPin.value);"/>
</form>
<div id='chart_div'></div>

<script type='text/javascript' src='https://www.google.com/jsapi'></script>

<script type='text/javascript'>
    var brothers = [];
    var brotherArray = {};
    var bigArray = {};
    var numBrothers = 0;
    var data;

    <?php
        $allusers= $wpdb->get_results("
            SELECT DISTINCT um1.meta_value 'pin', um2.meta_value 'big_pin', um3.meta_value 'first_name', um4.meta_value 'last_name' FROM wp_users u LEFT JOIN ( SELECT * FROM wp_usermeta wum WHERE wum.meta_key = 'pin' ) um1 ON u.ID = um1.user_id LEFT JOIN ( SELECT * FROM wp_usermeta wum WHERE wum.meta_key = 'big_pin' ) um2 ON u.ID = um2.user_id LEFT JOIN ( SELECT * FROM wp_usermeta wum WHERE wum.meta_key = 'first_name' ) um3 ON u.ID = um3.user_id LEFT JOIN ( SELECT * FROM wp_usermeta wum WHERE wum.meta_key = 'last_name' ) um4 ON u.ID = um4.user_id WHERE um1.meta_value IS NOT NULL ORDER BY `um1`.`meta_value` ASC 
            ");

        $numBrothersPHP = 0;

        foreach($allusers as $user) {
            if ($user->pin != null) {
                echo "brotherArray[Number('".$user->pin."')] = \"".$user->first_name." ".$user->last_name."\";\r\n";
                echo "bigArray[Number('".$user->pin."')] = Number('".$user->big_pin."');\r\n";
                if ($user->pin > $numBrothersPHP) {
                    $numBrothersPHP = $user->pin;
                }
            }
        }
        echo "numBrothers = ".$numBrothersPHP.";"
    ?>

    google.load('visualization', '1', {packages:['orgchart']});
    google.setOnLoadCallback(loadVis);

    function loadVis() {
        data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Big');
    }

    function drawChart(entered) {
        printBrother(entered);

        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true, allowCollapse:true});
    }

    function printBrother(pin) {
        if (bigArray[pin] == 0) {
            data.addRow([brotherArray[pin],'']);
        } else {
            data.addRow([brotherArray[pin],brotherArray[bigArray[pin]]]);
        }

        printChildren(pin);
    }

    function printChildren(printMyChildren) {
        for (var i = printMyChildren + 1; i < numBrothers; i++)
        {
            if (printMyChildren == bigArray[i]) {
                printBrother(i);
            }
        }
    }
</script>

非常离奇。由于JS是一种轻度类型的语言，我认为它并不像数字作为int或其他东西传递。此外，当我将5放入文本框并单击“提交”时，将添加树的父级，但不会在其下面添加任何内容。

不能成为数据问题，如果我将值硬编码到函数中，它就可以工作。

想法？谢谢！

更新（渲染JS）我删除了一些数组，因为它是重复的：

<form action="#" name="tree">
<input class="textBox" id="enteredPin" type="text" maxlength="3"/>
<input type="button" value="Get Tree" onclick="drawChart(document.tree.enteredPin.value);"/>
</form>
<div id='chart_div'></div>

<script type='text/javascript' src='https://www.google.com/jsapi'></script>

<script type='text/javascript'>
    var brothers = [];
    var brotherArray = {};
    var bigArray = {};
    var numBrothers = 0;
    var data;

    brotherArray[Number('001')] = "Rapheal Isaac";
bigArray[Number('001')] = Number('0');
brotherArray[Number('002')] = "Michael Boie";
bigArray[Number('002')] = Number('0');
brotherArray[Number('003')] = "Andrew Zivic";
bigArray[Number('003')] = Number('0');
brotherArray[Number('004')] = "Gautam Khanna";
bigArray[Number('004')] = Number('0');
brotherArray[Number('005')] = "Dale Bless";
bigArray[Number('005')] = Number('0');
brotherArray[Number('006')] = "James Donahue";
bigArray[Number('006')] = Number('0');
brotherArray[Number('007')] = "Steven Rapids";
bigArray[Number('007')] = Number('0');
brotherArray[Number('008')] = "Brian Stumm";
bigArray[Number('008')] = Number('0');
brotherArray[Number('009')] = "Don Pohler";
bigArray[Number('009')] = Number('0');
brotherArray[Number('010')] = "John Karam";
bigArray[Number('010')] = Number('0');
brotherArray[Number('011')] = "Mark Nowakowski";
bigArray[Number('011')] = Number('0');
brotherArray[Number('012')] = "Edward Smith";
bigArray[Number('012')] = Number('0');
brotherArray[Number('013')] = "Daniel Wolf";
bigArray[Number('013')] = Number('0');
brotherArray[Number('014')] = "Michael Fafard";
bigArray[Number('014')] = Number('1');
brotherArray[Number('015')] = "Dave Gorski";
bigArray[Number('015')] = Number('0');
brotherArray[Number('016')] = "Jason Miller";
bigArray[Number('016')] = Number('0');
brotherArray[Number('017')] = "Keith Bona";
bigArray[Number('017')] = Number('0');
brotherArray[Number('018')] = "Jeffrey Adams";
bigArray[Number('018')] = Number('0');
brotherArray[Number('019')] = "Erik VonColln";
bigArray[Number('019')] = Number('0');
brotherArray[Number('020')] = "Adam Levin";
bigArray[Number('020')] = Number('0');
brotherArray[Number('021')] = "Christopher Gates";
bigArray[Number('021')] = Number('0');
brotherArray[Number('022')] = "David Chesbro";
bigArray[Number('022')] = Number('0');
brotherArray[Number('023')] = "Anthony Verboys";
bigArray[Number('023')] = Number('0');
brotherArray[Number('024')] = "Scott Vadney";
bigArray[Number('024')] = Number('0');
brotherArray[Number('025')] = "Jeffrey Waltman";
bigArray[Number('025')] = Number('0');
brotherArray[Number('026')] = "Noel Aird";
bigArray[Number('026')] = Number('0');
brotherArray[Number('027')] = "Peter Stoffel";
bigArray[Number('027')] = Number('2');
brotherArray[Number('342')] = "Justin Monthie";
bigArray[Number('342')] = Number('323');
brotherArray[Number('343')] = "Jesus Esquivel";
bigArray[Number('343')] = Number('328');
brotherArray[Number('344')] = "Aaron Archuleta";
bigArray[Number('344')] = Number('317');
numBrothers = 344;  
    google.load('visualization', '1', {packages:['orgchart']});
    google.setOnLoadCallback(loadVis);

    function loadVis() {
        data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Big');
    }

    function drawChart(entered) {
        printBrother(entered);

        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true, allowCollapse:true});
    }

    function printBrother(pin) {
        if (bigArray[pin] == 0) {
            data.addRow([brotherArray[pin],'']);
        } else {
            data.addRow([brotherArray[pin],brotherArray[bigArray[pin]]]);
        }

        printChildren(pin);
    }

    function printChildren(printMyChildren) {
        for (var i = printMyChildren + 1; i < numBrothers; i++)
        {
            if (printMyChildren == bigArray[i]) {
                printBrother(i);
            }
        }
    }
</script>