使用JavaScript操作div元素实现航班计数与点击改背景功能问题排查

1. counter()计数异常修复 #

原函数错误将航班信息文本内容转为数字累加，而航班总数等于所有带printing类的元素个数，直接取元素集合长度即可：

function counter(){
    const flightList = document.getElementsByClassName("printing");
    document.getElementById("total").innerHTML = flightList.length;
}

2. Accept按钮改背景功能修复 #

原函数存在3处错误：未接收传入的按钮元素参数、未正确定位对应航班div、背景属性与颜色值写法不规范，修复后代码：

function changeColor(btn){
    // 按钮的直接父元素就是对应航班的div
    btn.parentElement.style.backgroundColor = 'green';
}

额外HTML笔误修正 #

原HTML中存在非法标签<divи>，修改为标准<div>即可。

完整可运行代码示例 #

JavaScript部分

function addRow(){
    const name = document.getElementById("name");
    const plainNum = document.getElementById("plainNum");
    const coordinates = document.getElementById("coordinates");
    const radius = document.getElementById("radius");
    const altitude = document.getElementById("altitude");
    const type = document.getElementById("type");
    if(!name.value || !plainNum.value || !coordinates.value || !radius.value || !altitude.value || !type.value){
        alert("Enter all values");
        return;
    }
    const output = document.getElementById("output");
    const divForOutput = document.createElement("DIV");
    const btn1 = document.createElement("BUTTON");
    const btn2 = document.createElement("BUTTON");
    const t1 = document.createTextNode("Accept");
    const t2 = document.createTextNode("Reject");
    btn1.appendChild(t1);
    btn2.appendChild(t2);
    divForOutput.innerHTML += name.value +", " + plainNum.value +"<br>" + "Radius: " + radius.value +", "+"Altitude: "+altitude.value+"<br>"+type.value+"<br>";
    divForOutput.appendChild(btn1);
    divForOutput.appendChild(btn2);
    divForOutput.setAttribute('class','printing');
    output.appendChild(divForOutput);
    btn1.setAttribute('onclick','changeColor(this);');
    btn2.setAttribute('onclick','disableButtons()');
    // 可选：提交后清空表单
    name.value = "";
    plainNum.value = "";
    coordinates.value = "";
    radius.value = "";
    altitude.value = "";
    counter();
}
function disableButtons(){}
function changeColor(btn){
    btn.parentElement.style.backgroundColor = 'green';
}
function counter(){
    const flightList = document.getElementsByClassName("printing");
    document.getElementById("total").innerHTML = flightList.length;
}

HTML部分

<h1>Register flight</h1>
<form>
    <div>
        <label>Name and surname</label>
        <input type="text" id="name">
    </div>
    <div>
        <label>Number plate</label>
        <input type="text" id="plainNum">
    </div>
    <div>
        <label>Coordinates</label>
        <input type="text" id="coordinates">
    </div>
    <div>
        <label>Radius</label>
        <input type="text" id="radius">
    </div>
    <div>
        <label>Altitude</label>
        <input type="text" id="altitude">
    </div>
    <div>
        <label>Type</label>
        <select id="type">
            <option value="Comercial">Comercial</option>
            <option value="Buissines">Buissines</option>
        </select>
    </div>
    <div>
        <input type="button" value="Submit" onclick="addRow();">
    </div>
</form>
<div>
    <h3>Registered flights</h3>
    <p>Total:<span id="total">0</span></p>
</div>
<div id="output"></div>

内容的提问来源于stack exchange，提问作者itmemilan