javascript - 我的代码被复制并粘贴了大约5次，但是我该如何做，所以它只有一次？

基本上，我前段时间编写了一个脚本，该脚本可以更改div的样式和文本，但是有很多重复性。

我已经尝试过使用forloop循环所有表的数组来处理所有表，但是它只是一次将它们全部打印出来，而应该一次打印一次。

var counter2 = 0;
var name = document.getElementById('naam').value;
var numberOfPeople = document.getElementById('mensenAantal').value;
var time = document.getElementById('tijd').value;

if(document.getElementById('mensenAantal').value ==
document.getElementById('people2').value){
if (counter2 == 0){
document.getElementById('table3').innerHTML += "<br><b>Reserved</b>";
document.getElementById('table3').style.borderColor = 'red';                document.getElementById('table3').style.borderWidth = '2px';                document.getElementById('reservation').innerHTML += name + ', ' + numberOfPeople + ', ' + time + '<br>';
counter2 += 1;
}else if (counter2 == 1){
document.getElementById('table4').innerHTML += "<br><b>Reserved</b>";
document.getElementById('table4').style.borderColor = 'red';
document.getElementById('table4').style.borderWidth = '2px';
document.getElementById('reservation').innerHTML += name + ', ' + numberOfPeople + ', ' + time + '<br>';
counter2 += 1;
}else if (counter2 == 2){
document.getElementById('table5').innerHTML += "<br><b>Reserved</b>";
document.getElementById('table5').style.borderColor = 'red';
document.getElementById('table5').style.borderWidth = '2px';
document.getElementById('reservation').innerHTML += name + ', ' + numberOfPeople + ', ' + time + '<br>';
counter2 += 1;
}else if (counter2 == 3){
document.getElementById('table6').innerHTML += "<br><b>Reserved</b>";               document.getElementById('table6').style.borderColor = 'red';
document.getElementById('table6').style.borderWidth = '2px';
document.getElementById('reservation').innerHTML += name + ', ' + numberOfPeople + ', ' + time + '<br>';
counter2 += 1;
}else if (counter2 == 4){
document.getElementById('table7').innerHTML += "<br><b>Reserved</b>";
document.getElementById('table7').style.borderColor = 'red';
document.getElementById('table7').style.borderWidth = '2px';
document.getElementById('reservation').innerHTML += name + ', ' + numberOfPeople + ', ' + time + '<br>';
counter2 += 1;
}else if (counter2 => 5){
alert('All 4 person tables are reserved!');
}
}

我想要的基本上是将复制的整个代码粘贴在这样的一个代码中：

document.getElementById(tablenumber).innerHTML += "<br><b>Reserved</b>";
document.getElementById(tablenumber).style.borderColor = 'red';
document.getElementById(tablenumber).style.borderWidth = '2px';
document.getElementById('reservation').innerHTML += name + ', ' + numberOfPeople + ', ' + time + '<br>';

最佳答案

这个怎么样？看起来也很干净！

var counter2 = 0;
var name = document.getElementById('naam').value;
var numberOfPeople = document.getElementById('mensenAantal').value;
var time = document.getElementById('tijd').value;

if(document.getElementById('mensenAantal').value ==
    document.getElementById('people2').value){

    if( counter2 < 5) {
        var c = counter2 + 3;
        document.getElementById('table' + c).innerHTML += "<br><b>Reserved</b>";
        document.getElementById('table' + c).style.borderColor = 'red';
        document.getElementById('table' + c).style.borderWidth = '2px';
        document.getElementById('reservation').innerHTML += name + ', ' + numberOfPeople + ', ' + time + '<br>';
        counter2 += 1;
    } else {
        alert('All 4 person tables are reserved!');
    }
}