Script cycle through different elements issue

Anki Card Design
3

Thank you for taking the time to answer. You hit the nail on the head there, my approach was not really in line with the desired behaviour (it was just the closest I could get on my own given my lack of knowledge). Your suggestion looks a lot more logical.

After testing it out it seems to have solved the problem with empty fields and the indicator well. However, the script only seems to work for the first card reviewed in a session (with subsequent cards being empty).

I searched the forum a bit for why that might be, and found this post by @abdo that might be relevant?

I tried changing the script you provided to use var instead:

<script>
  var counter = document.getElementsByClassName("count");
  console.log(counter.length);
  var gallarray = Array.from(counter);
  console.log(typeof gallarray);
  var indicarray = [];
  var finalarray = [];

  for (var i = 0, x = counter.length; i < x; i++) {
    if (gallarray[i].childNodes.length > 0) {
      indicarray.push(gallarray[i]);
      console.log("test completed");
    }
  }

  for (var i = 0, x = indicarray.length; i < x; i++) {
    var indiccresec = document.createElement('span');
    indiccresec.setAttribute("class", "indicator");
    z = indiccresec.innerHTML = `${i + 1}/${x}`;
    idnext = indicarray[i].id;
    u = document.getElementById(idnext).appendChild(indiccresec);
    indicarray[0].classList.add('active');
    finalarray.push(indicarray[i]);
  }

  var currentIndex = 0;

  document.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
      currentIndex = (currentIndex + (event.key === 'ArrowRight' ? 1 : -1) + finalarray.length) % finalarray.length;
      finalarray.forEach((element, index) => {
        element.classList.toggle('active', index === currentIndex);
      });
    }
  });
</script>

This seems to have fixed subsequent cards being totally blank. Unfortunately it still has some persistance issues. For the first pass through cards behaves as aspected, but when they show up the second time the script no longer works.

I attached an example deck with just the script and three example cards that illustrates this, in case that makes things any easier (let me know if the link expires):

1 Like