Javascript 我的代码被复制和粘贴了大约5次，但我如何才能使它成为'；只有一次？_Javascript

Javascript 我的代码被复制和粘贴了大约5次，但我如何才能使它成为'；只有一次？

javascript

Javascript 我的代码被复制和粘贴了大约5次，但我如何才能使它成为'；只有一次？,javascript,Javascript,基本上，我不久前写了一个脚本，它改变了div的样式和文本，但是有很多重复性我已经尝试了所有表的一个数组，它使用一个forloop循环所有表，但是它只是一次打印所有表，而它们应该一次打印一个 var counter2 = 0; var name = document.getElementById('naam').value; var numberOfPeople = document.getElementById('mensenAantal').value; var time = documen

基本上，我不久前写了一个脚本，它改变了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!');
}
}

var计数器2=0；
var name=document.getElementById（'naam'）.value；
var numberOfPeople=document.getElementById（'mensenAantal'）.value；
var time=document.getElementById（'tijd'）。值；
if（document.getElementById（'mensenantal'）。值==
document.getElementById（'people2'）.value）{
如果（计数器2==0）{
document.getElementById（'table3'）.innerHTML+=“
保留”；
document.getElementById（'table3'）。style.borderColor='red'；document.getElementById（'table3'）。style.borderWidth='2px'；document.getElementById（'reservation'）。innerHTML+=name+'，'+numberOfPeople+'，'+time+'
'；
计数器2+=1；
}else if（计数器2==1）{
document.getElementById（'table4'）。innerHTML+=“
保留”；
document.getElementById（'table4'）。style.borderColor='red'；
document.getElementById（'table4'）。style.borderWidth='2px'；
document.getElementById（'reservation'）.innerHTML+=name+，“+numberOfPeople+，“+time+”
；
计数器2+=1；
}else if（计数器2==2）{
document.getElementById（'table5'）。innerHTML+=“
保留”；
document.getElementById（'table5'）。style.borderColor='red'；
document.getElementById（'table5'）。style.borderWidth='2px'；
document.getElementById（'reservation'）.innerHTML+=name+，“+numberOfPeople+，“+time+”
；
计数器2+=1；
}else if（计数器2==3）{
document.getElementById（'table6'）。innerHTML+=“
保留”；document.getElementById（'table6'）。style.borderColor='red'；
document.getElementById（'table6'）。style.borderWidth='2px'；
document.getElementById（'reservation'）.innerHTML+=name+，“+numberOfPeople+，“+time+”
；
计数器2+=1；
}else if（计数器2==4）{
document.getElementById（'table7'）.innerHTML+=“
保留”；
document.getElementById（'table7'）。style.borderColor='red'；
document.getElementById（'table7'）。style.borderWidth='2px'；
document.getElementById（'reservation'）.innerHTML+=name+，“+numberOfPeople+，“+time+”
；
计数器2+=1；
}否则如果（计数器2=>5）{
警报（'所有4人桌均已保留！'）；
}
}

我想要的基本上是复制粘贴的整个代码，就像这样：

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>';

document.getElementById（tablenumber）.innerHTML+=“
保留”；
document.getElementById（tablenumber）.style.borderColor='red'；
document.getElementById（tablenumber）.style.borderWidth='2px'；
document.getElementById（'reservation'）.innerHTML+=name+，“+numberOfPeople+，“+time+”
；

您可以使用函数避免重复LOC，例如

替换以下内容：

function getElement(id) {
 return document.getElementById(id);
}

与

例如，您可以使用函数避免重复LOC

替换以下内容：

function getElement(id) {
 return document.getElementById(id);
}

与

使用

开关

并存储目标表可能很有用：

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){

  var target;

  switch (counter2) {

    case 0:
      target = 'table3';
      break;

    case 1:
      target = 'table4';
      break;

    case 2:
      target = 'table5';
      break;

    case 3:
      target = 'table6';
      break;

    case 4:
      target = 'table7';
      break;

    default:
      alert('All 4 person tables are reserved!');
  }

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

    counter2++;
  }

}

var计数器2=0；
var name=document.getElementById（'naam'）.value；
var numberOfPeople=document.getElementById（'mensenAantal'）.value；
var time=document.getElementById（'tijd'）。值；
if（document.getElementById（'mensenantal'）。值==
document.getElementById（'people2'）.value）{
var目标；
开关（计数器2）{
案例0：
目标=‘表3’；
打破
案例1：
目标=‘表4’；
打破
案例2：
目标=‘表5’；
打破
案例3：
目标=‘表6’；
打破
案例4：
目标=‘表7’；
打破
违约：
警报（'所有4人桌均已保留！'）；
}
如果（计数器2<5）{
document.getElementById（目标）.innerHTML+=“
保留”；
document.getElementById（target.style.borderColor='red'；
document.getElementById（target.style.borderWidth='2px'；
document.getElementById（'reservation'）.innerHTML+=name+，“+numberOfPeople+，“+time+”
；
计数器2++；
}
}

使用

开关

并存储目标表可能很有用：

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){

  var target;

  switch (counter2) {

    case 0:
      target = 'table3';
      break;

    case 1:
      target = 'table4';
      break;

    case 2:
      target = 'table5';
      break;

    case 3:
      target = 'table6';
      break;

    case 4:
      target = 'table7';
      break;

    default:
      alert('All 4 person tables are reserved!');
  }

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

    counter2++;
  }

}

var计数器2=0；
var name=document.getElementById（'naam'）.value；
var numberOfPeople=document.getElementById（'mensenAantal'）.value；
var time=document.getElementById（'tijd'）。值；
if（document.getElementById（'mensenantal'）。值==
document.getElementById（'people2'）.value）{
var目标；
开关（计数器2）{
案例0：
目标=‘表3’；
打破
案例1：
目标=‘表4’；
打破
案例2：
目标=‘表5’；
打破
案例3：
目标=‘表6’；
打破
案例4：
目标=‘表7’；
打破
违约：
警报（'所有4人桌均已保留！'）；
}
如果（计数器2<5）{
document.getElementById（目标）.innerHTML+=“
保留”；
document.getElementById（target.style.borderColor='red'；
document.getElementById（target.style.borderWidth='2px'；
document.getElementById（'reservation'）.innerHTML+=name+，“+numberOfPeople+，“+time+”
；
计数器2++；
}
}

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

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!');
    }
}

var计数器2=0；
var name=document.getElementById（'naam'）.value；
var numberOfPeople=document.getElementById（'mensenAantal'）.value；
var time=document.getElementById（'tijd'）。值；
if（document.getElementById（'mensenantal'）。值==
document.getElementById（'people2'）.value）{
如果（计数器2<5）{
var c=计数器2+3；
document.getElementById（'table'+c）.innerHTML+=“
保留”；
document.getElementById（'table'+c）.style.borderColor='red'；
document.getElementById（'table'+c）.style.borderWidth='2px'；
document.getElementById（'reservation'）.innerHTML+=name+，“+numberOfPeople+，“+time+”
；
计数