querySelector (GetElementByID) - Multiple IDs

Question

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.

Answer 1

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.

function gregorian_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('/');
}

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

Answer 2

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:

function gregorian_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 node
  const 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('/');
})

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