Javascript 制作飞机座位表

我正在尝试使用飞机座位图生成器。它的作用非常简单。您可以在html输入中插入第一、商业和经济舱的乘客。并自动显示一个图表。这项工作由javascript执行。我正试着运行它，但出了点问题。它就是不起作用。它显示了您应该将输入和数字7放在下面的表格。我想这是因为我缺少一些javascript。当您填充输入时，不会发生任何事情

为了更简单，我将代码放在JSFIDLE上

因为我必须在这里粘贴代码，你有我的javascript。我认为问题就在这里：

makeRequest(request, id, false);

    $('#'+id).dialog({ width: 'auto', height: 'auto', modal: true, resizable: false });
    $('#'+id).dialog('open');
}

var AircraftConfigCheck = {
    capacity :  200,
    business :  0,
    economy:    0,
    first:      0,
    businessFree : 0,
    economyFree : 0,
    firstFree: 0,

    total : function() {
        return (parseInt(this.business) || 0) * 2 + (parseInt(this.economy) || 0) + (parseInt(this.first) || 0) * 4;
    },

    checkBusiness : function() {
        if( this.total() > this.capacity ) {
            this.business = Math.floor( ( this.capacity - this.economy - this.first * 4 ) / 2 );
        }
    },

    checkEconomy : function() {
        if( this.total() > this.capacity ) {
            this.economy = this.capacity - this.business * 2 - this.first * 4;
        }
    },

    checkFirst : function() {
        if( this.total() > this.capacity ) {
            this.first = Math.floor( ( this.capacity - this.economy - this.business * 2 ) / 4 );
        }
    },

    updateCapacity : function() {
        this.businessFree = Math.max( 0, Math.floor( ( this.capacity - this.total() ) / 2 ) );
        this.firstFree = Math.max( 0, Math.floor( ( this.capacity - this.total() ) / 4 ) );
        this.economyFree = Math.max( 0, this.capacity - this.total() );
    },

    setValues : function() {
        $("#business").val( this.business ); 
        $("#economy").val( this.economy ); 
        $("#first").val( this.first ); 
        $("#businessFree").html( this.businessFree ); 
        $("#economyFree").html( this.economyFree ); 
        $("#firstFree").html( this.firstFree ); 
        /*$("#first").val( this.total() ); */
        this.render();
    },

    render : function() {
        makeRequest('http://www.fsairlines.net/crewcenter/aircraft_config_ajax.php5?max_pax='+this.capacity+
            '&first_seats='+this.first+
            '&business_seats='+this.business+
            '&economy_seats='+this.economy,
            'aircraft',
            true
        );
    }
 }

$(function() {
    $(".seatInput").keyup(function() {
        switch( $(this).attr("id") ) {
            case "economy": 
                AircraftConfigCheck.economy = $("#economy").val();
                AircraftConfigCheck.checkEconomy();
                AircraftConfigCheck.updateCapacity();
                AircraftConfigCheck.setValues();
                break;

            case "business":
                AircraftConfigCheck.business = $("#business").val();
                AircraftConfigCheck.checkBusiness();
                AircraftConfigCheck.updateCapacity();
                AircraftConfigCheck.setValues();
                break;

            case "first":
                AircraftConfigCheck.first = $("#first").val();
                AircraftConfigCheck.checkFirst();
                AircraftConfigCheck.updateCapacity();
                AircraftConfigCheck.setValues();
                break;
        }
    });
});

提前谢谢

---

最新更新：

您的代码中有很多语法错误，这就是它无法运行的原因

这部分代码没有任何意义：

makeRequest(request, id, false);

    $('#'+id).dialog({ width: 'auto', height: 'auto', modal: true, resizable: false });
    $('#'+id).dialog('open');
}

makeRequest（）

函数不存在，因此无法调用它。在这个块的末尾有一个无关的

}

然后，稍后在render函数中，您尝试再次调用

makeRequest（）

，但它不存在

---

---

运行刚刚编写的Javascript代码时，首先要检查浏览器中的错误控制台或调试控制台是否存在错误。然后，无论什么时候出现问题，请再次检查控制台。然后，在测试代码时，再次检查错误控制台

7@vals你这是什么意思？这是javascript请求的结果。数字7在html中，我说的是新代码仍然不起作用，还有更多problems@carlosremove-请采纳我的建议，查看浏览器错误控制台，查看其中报告的错误，然后修复这些错误。您的最新代码仍然显示错误。我们在这里帮助您学习如何修复自己的代码。现在，它显示的是

未捕获的TypeError:cannotread属性'appendChild'为null

。但是为什么呢？我被困在这里@carlosremove-因为

mainText

是

null

。它是

null

，因为HTML中没有包含

id=“container”

的对象。