Queryselector (getelementbyid) - Multiple Ids

i have function to convert gregorian dates to jalali date,its work for one tag,but i have unspecified number of this tags in one page, and it must convert all of theme. i know get

Solution 1:

You have a few issues with your code:

• There is no such thing as a date element. You should use a div instead.

• An id (identifier) must be unique to its element, it cannot be repeated on other elements. Instead, you should use a class. At the moment you have a date class on all your elements expect the first. Thus, if you add the date class to your first element. Once you have done that you can use document.getElementsByClassName() to get all the elements on your page which have the class date.

  document.getElementsByClassName() will return a HTMLCollection, and thus you can turn it into an array using the spread syntax (...). Turning your collection into an array will allow you to loop over it using .forEach. Using .forEach you can access every element with the class date, which you can then use to pull it's data-* attributes from.

See working example below:

functiongregorian_to_jalali(gy, gm, gd) {
  g_d_m = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
  if (gy > 1600) {
    jy = 979;
    gy -= 1600;
  } else {
    jy = 0;
    gy -= 621;
  }
  gy2 = (gm > 2) ? (gy + 1) : gy;
  days = (365 * gy) + (parseInt((gy2 + 3) / 4)) - (parseInt((gy2 + 99) / 100)) + (parseInt((gy2 + 399) / 400)) - 80 + gd + g_d_m[gm - 1];
  jy += 33 * (parseInt(days / 12053));
  days %= 12053;
  jy += 4 * (parseInt(days / 1461));
  days %= 1461;
  if (days > 365) {
    jy += parseInt((days - 1) / 365);
    days = (days - 1) % 365;
  }
  jm = (days < 186) ? 1 + parseInt(days / 31) : 7 + parseInt((days - 186) / 30);
  jd = 1 + ((days < 186) ? (days % 31) : ((days - 186) % 30));
  return [jy, jm, jd];
}


const dateElements = document.getElementsByClassName("date"); // get all elements with the class "date"
[...dateElements].forEach(function(dateElement) { // loop through each element, where dateElement is the current nodeconst year = Number(dateElement.dataset.year);
  const month = Number(dateElement.dataset.month);
  const day = Number(dateElement.dataset.day);
  dateElement.textContent = gregorian_to_jalali(year, month, day).join('/');
})

<divclass="date"data-year="2019"data-month="5"data-day="7"></div><br /><divclass="date"data-year="2019"data-month="2"data-day="7"></div><br /><divclass="date"data-year="2019"data-month="2"data-day="8"></div><br /><divclass="date"data-year="2019"data-month="2"data-day="9"></div><br /><divclass="date"data-year="2019"data-month="2"data-day="10"></div>

Solution 2:

You made mistakes in your code, also in the DOM, you do not have two elements with the same identifier. The querySelector returns that the first element found, you must instead use querySelectorAll which will return you an array.

functiongregorian_to_jalali(gy,gm,gd){
 g_d_m=[0,31,59,90,120,151,181,212,243,273,304,334];
 if(gy > 1600){
  jy=979;
  gy-=1600;
 }else{
  jy=0;
  gy-=621;
 }
 gy2=(gm > 2)?(gy+1):gy;
 days=(365*gy) +(parseInt((gy2+3)/4)) -(parseInt((gy2+99)/100)) +(parseInt((gy2+399)/400)) -80 +gd +g_d_m[gm-1];
 jy+=33*(parseInt(days/12053)); 
 days%=12053;
 jy+=4*(parseInt(days/1461));
 days%=1461;
 if(days > 365){
  jy+=parseInt((days-1)/365);
  days=(days-1)%365;
 }
 jm=(days < 186)?1+parseInt(days/31):7+parseInt((days-186)/30);
 jd=1+((days < 186)?(days%31):((days-186)%30));
 return [jy,jm,jd];
}

var dateElement = document.querySelectorAll('.date');
for(var i = 0; i < dateElement.length; i++) {
  const year = Number(dateElement[i].dataset.year); // "2019"const month = Number(dateElement[i].dataset.month); // "2"const day = Number(dateElement[i].dataset.day); // "6"
  dateElement[i].textContent = gregorian_to_jalali(year, month, day).join('/');
}

<divclass="date"data-year="2019"data-month="5"data-day="7"></div><hr><divclass="date"data-year="2019"data-month="2"data-day="7"></div><hr><divclass="date"data-year="2019"data-month="2"data-day="8"></div><hr><divclass="date"data-year="2019"data-month="2"data-day="9"></div><hr><divclass="date"data-year="2019"data-month="2"data-day="10"></div>