Automate function to not copy paste every single time-CodePudding

Im doing a calendar and i have 98 functions to automate. Actually everything is working (for the 3 first test) but i dont want to copy paste 98 times the same function and switch everything everytime.

Here is my code so you can understand. (There is the 3 first functions and i want 98 like that) :

var heure8 = document.getElementById('h8').textContent;

var heure9 = document.getElementById('h9').textContent;

var heure10 = document.getElementById('h10').textContent;

var heure11 = document.getElementById('h11').textContent;

var heure12 = document.getElementById('h12').textContent;

var heure13 = document.getElementById('h13').textContent;

var heure14 = document.getElementById('h14').textContent;

var heure15 = document.getElementById('h15').textContent;

var heure16 = document.getElementById('h16').textContent;

var heure17 = document.getElementById('h17').textContent;

var heure18 = document.getElementById('h18').textContent;

var heure19 = document.getElementById('h19').textContent;

var heure20 = document.getElementById('h20').textContent;

var heure21 = document.getElementById('h21').textContent;

var heure22 = document.getElementById('h22').textContent;

document.getElementById('x1').addEventListener('click', creneau)
var ajout = 0;
function creneau(){
    var date1 = document.getElementById('w1').innerText;
    var date2 = document.getElementById('w2').innerText;
    var date3 = document.getElementById('w3').innerText;
    var date4 = document.getElementById('w4').innerText;
    var date5 = document.getElementById('w5').innerText;
    var date6 = document.getElementById('w6').innerText;
    var date7 = document.getElementById('w7').innerText;
    x1 = heure8  ' à '  heure9  ' le '  date1;
    
    
    if((ajout == 2)){
       ajout = 0; 
       }
    
        {     
    
    ajout  = 1; 
     console.log(ajout)
    }   
if (ajout===1) {
   document.getElementById('r1').innerHTML = x1;
}
if(ajout===2) {
    document.getElementById('r1').innerHTML = '';
}
}
document.getElementById('x2').addEventListener('click', creneau2)
var ajout2 = 0;
function creneau2(){
    var date1 = document.getElementById('w1').innerText;
    var date2 = document.getElementById('w2').innerText;
    var date3 = document.getElementById('w3').innerText;
    var date4 = document.getElementById('w4').innerText;
    var date5 = document.getElementById('w5').innerText;
    var date6 = document.getElementById('w6').innerText;
    var date7 = document.getElementById('w7').innerText;
   var x2 = heure9  ' à '  heure10  ' le '  date1;
    
    
    if((ajout2 == 2)){
       ajout2 = 0; 
       }
    
        {     
    
    ajout2  = 1; 
     console.log(ajout2)
    }   
if (ajout2===1) {
   document.getElementById('r2').innerHTML = x2;
}
if(ajout2===2) {
    document.getElementById('r2').innerHTML = '';
}
}
document.getElementById('x3').addEventListener('click', creneau3)
var ajout3 = 0;
function creneau3(){
    var date1 = document.getElementById('w1').innerText;
    var date2 = document.getElementById('w2').innerText;
    var date3 = document.getElementById('w3').innerText;
    var date4 = document.getElementById('w4').innerText;
    var date5 = document.getElementById('w5').innerText;
    var date6 = document.getElementById('w6').innerText;
    var date7 = document.getElementById('w7').innerText;
   var x3 = heure10  ' à '  heure11  ' le '  date1;
    
    
    if((ajout3 == 2)){
       ajout3 = 0; 
       }
    
        {     
    
    ajout3  = 1; 
     console.log(ajout3)
    }   
if (ajout3===1) {
   document.getElementById('r3').innerHTML = x3;
}
if(ajout3===2) {
    document.getElementById('r3').innerHTML = '';
}
}

For this, everything is good, but i wanna do only one function that can do for my 98divs if you guys have ideas :p Thanks a lot, Zartex.

CodePudding user response：

Use arrays for sequence of repeatable data data and loops like for to iterate over them.

let ajout_list = []
let x_list = []
for (let idx = 1; idx <= 98; idx  ) {
   ajout_list[idx] = 0;
   document.getElementById('x'   idx).addEventListener('click', function() {
      // your repeated code
      // ugh... did you mean ajout there, because there's no way it will be 2 just a line below if you
      // never modified it since start of function?
      x_list[idx] = heure10  ' à '  heure11  ' le '  date1;

      if((ajout_list[idx] == 2)){
          ajout_list[idx] = 0;
      }
      // rest of your code modified along same lines
   })
}

CodePudding user response：

First of all you can use loop for get elements from HTML like that:

creneau(elem) {
let id = elem.id;
for (let i = 1; i < 8; i  ) {
    var date1 = document.getElementById(`w${i}`).innerText;
}
x1 = heure8   ' à '   heure9   ' le '   date1;}

Secondly, if you have three functions and all of them are doing the same thing just write only one time on js and call the function with the argument on the HTML side. For example:

<input type="button" id="creneau" onclick="creneau(this)">
<input type="button" id="creneau1" onclick="creneau(this)">
<input type="button" id="creneau2" onclick="creneau(this)">

If you have any new questions don't hesitate to answer.