Thiết kế website giá rẻ

Question

`I am beginner in JS. I am trying to implement rotating circle and connect it with showing 3 other divs and highliting patient on sidebar.
When I click on sidebar everything is working ok but if I try to do the same with rotating cirzle it doesn’t work.
Could you help me to find the error?

Thank you in advance.

I was trying almost everything

onclick in pace od addlistener, trying to find clues here, trying to console.log the element after addlistener but it doesn’t show anything, asking chatGpt
and many other (3 days)
Still doesn’t work….. 🙁

Scripts

 <script>
    $(function () {
      $('.rotating-slider').rotatingSlider({
        autoRotate: true,
        autoRotateInterval: 6000,
        draggable: true,
        directionControls: true,
        directionLeftText: '‹',
        directionRightText: '›',
        rotationSpeed: 750,
        slideHeight: 80,
        slideWidth: 160,

      });
    });
    document.addEventListener("DOMContentLoaded", function () {
      // Znajdź wszystkie elementy '.rotating-slider .inner' i przypisz zdarzenia do każdego z nich
      var innerElements = document.querySelectorAll('li');
      innerElements.forEach(function (element, index) {
        element.addEventListener('click', function () {
          console.log("button.cliked");
          toggleLabel(index);
          toggleProfile(index);
        });
      });
    
      var sidebarItems = document.querySelectorAll('.sidebar-item');
      sidebarItems.forEach(function (item, index) {
        item.addEventListener('click', function () {
          toggleLabel(index);
          toggleProfile(index);
        });
      });
    
      toggleLabel(0);
      toggleProfile(0);
    });
    

    function toggleProfile(index) {
      var patientDetails = document.querySelectorAll('.patient-details');
      patientDetails.forEach(function (detail) {
        detail.classList.add('hidden');
      });

      var activePatientDetail = document.getElementById('patient-details' + (index + 1));
      if (activePatientDetail) {
        activePatientDetail.classList.remove('hidden');
      }

      var sidebarItems = document.querySelectorAll('.sidebar-item');
      sidebarItems.forEach(function (item) {
        item.classList.remove('active');
      });

      var activeSidebarItem = document.getElementById('patient' + (index));
      if (activeSidebarItem) {
        activeSidebarItem.classList.add('active');
        activeSidebarItem.style.backgroundColor = "yellow";
        console.log(activeSidebarItem);
      }

      var profile = document.getElementById("patient-profile");
      profile.classList.add("visible");


      profile.classList.add("fade-in");

      setTimeout(function () {
        profile.classList.remove("fade-in");
      }, 500);
    }
    function toggleLabel(index) {
      var sidebarItems = document.querySelectorAll('.sidebar-item');

      sidebarItems.forEach(function (item) {
        item.style.backgroundColor = "green";
      });
    
      sidebarItems[index].style.backgroundColor = "red";
    }
  </script>

  <script>
    var spinner = document.getElementById('spinner');
    var rotation = 0; 

    function rotateSpinner(degrees) {
      rotation += degrees;
      spinner.style.transform = 'translate(-50%, -50%) rotate(' + rotation + 'deg)'; // Apply the new rotation
    }

    window.addEventListener('keydown', function (event) {
      if (event.key === 'ArrowRight') {
        rotateSpinner(90);
      }
    });
  </script>

html

<body>
  <div class="vertical">
    <div class="main">
      <div class="top">
        <div class="spinner"></div>
        <div class="rotating-slider">
          <div class="white-circle"></div>
          <ul class="slides">
            <li>
              <div class="inner" data-index="1" id="inner1">
                <h2>Gynäkologie</h2>
                <p>Schwangerschaft<br>Hypermenorrhö</p>
                <img class="icon--1" src="icon-1.png" alt="Icon 1">
              </div>
            </li>
            <li>
              <div class="inner" data-index="2" id="inner2">
                <h2>Kardiologie</h2>
                <p>Herzinsuffizienz<br>.</p>
                <img class="icon--2" src="icon-2.png" alt="Icon 2">
              </div>
            </li>
            <li>
              <div class="inner" data-index="3" id="inner3">
                <h2>Nephrologie</h2>
                <p>CKD<br>.</p>
                <img class="icon--3" src="icon-3.png" alt="Icon 3">
              </div>
            </li>
            <li>
              <div class="inner" data-index="4" id="inner4">
                <h2>Gastro-<br>
                  Enterologie</h2>
                <p>IBD<br>
                  Crohn’s Disease</p>
                <img class="icon--4" src="icon-4.png" alt="Icon 4">
              </div>
            </li>
            <li>
              <div class="inner" data-index="5" id="inner5">
                <h2>Onkologie</h2>
                <p>.<br>.</p>
                <img class="icon--5" src="icon-5.png" alt="Icon 5">
              </div>
            </li>
            <li>
              <div class="inner" data-index="6" id="inner6"
                <h2>Hausarzt-<br>
                  Medizin
                </h2>
                <p>PBM
                  <br>.
                </p>
                <img class="icon--6" src="icon-6.png" alt="Icon 2">
              </div>
            </li>
            <!-- Pozostałe elementy .inner -->
          </ul>
        </div>
      </div>
      <div class="sidebar">
        <h2>Patienten <br>profile</h2>
        <div class="sidebar-item" id="patient1" data-index="0">
          <img src="patient.png" alt="Obrazek 1">
          <p>Andrea</p>
        </div>
        <div class="sidebar-item" id="patient2" data-index="1">
          <img src="patient3.png" alt="Obrazek 2">
          <p>Beat</p>
        </div>
        <div class="sidebar-item" id="patient3" data-index="2">
          <img src="patient2.png" alt="Obrazek 1">
          <p>Regina</p>
        </div>
        <div class="sidebar-item" id="patient4" data-index="3">
          <img src="patient3.png" alt="Obrazek 1">
          <p>Rolf</p>
        </div>
        <div class="sidebar-item" id="patient5" data-index="4">
          <img src="patient2.png" alt="Obrazek 1">
          <p>Anna</p>
        </div>
        <div class="sidebar-item" id="patient6" data-index="5">
          <img src="patient4.png" alt="Obrazek 1">
          <p>.</p>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div id="circle-labels">
        <label for="image1" class="circle-label active"><img src="14.png" alt="" class="chart" id="image1"></label>
        <label for="image2" class="circle-label"><img src="79.png" alt="" class="chart" id="image2"></label>
        <label for="image3" class="circle-label"><img src="1.png" alt="" class="chart" id="image3"></label>
        <label for="image4" class="circle-label"><img src="1b.png" alt="" class="chart" id="image4"></label>
        <label for="image5" class="circle-label"><img src="2.png" alt="" class="chart" id="image5"></label>
        <label for="image6" class="circle-label"><img src="14.png" alt="" class="chart" id="image6"></label>
      </div>
      <div id="patient-profile">
        <div id="patient-details1" class="patient-details" data-index="0">
          <img src="patient.png" alt="" class="profile-photo">
          <div class="patient">
            <p>Andrea</p>
            <p>27 Jahre</p>
            <ul>
              <li>Leidet unter übermässig starker Monatsblutung (Hypermenorrhö) und diagnostisch belegtem Eisenmangel.
              </li>
              <li>Gewicht: 50 kg, vegane Ernährung</li>
              <li>Ständige Müdigkeit, Erschöpfung, Haarverlust</li>
              <li>Orale Eisensubstitution führte zu Verstopfungen, was die Therapieadhärenz stark beeinträchtigte</li>
            </ul>
            <div class="under-ul">Bei Unverträglichkeit von oral aufgenommenem Eisen ist eine intravenöse
              Eisensubstitution
              indiziert</div>
          </div>
        </div>
        <div id="patient-details2" class="patient-details" data-index="1">
          <img src="patient3.png" alt="" class="profile-photo">
          <div class="patient">
            <p>Beat</p>
            <p>73 Jahre</p>
            <ul>
              <li>Diagnostisch belegte Eisenmangelanämie mit typischer Symptomatik
              </li>
              <li>Altersbedingte Verminderung der gastrointestinalen Resorptionsfähigkeit</li>
              <li>
                Anhaltende Müdigkeit, allgemeines Schwächegefühl, aber auch Konzentrations- und Gedächtnisstörungen</li>
              <li>Orale Eisensubstitution führte nicht zum gewünschten Therapieerfolg</li>
            </ul>
            <div class="under-ul">Bei Unverträglichkeit von oral aufgenommenem Eisen ist eine intravenöse Eisensubstitution indiziert</div>
          </div>
        </div>
        <div id="patient-details3" class="patient-details" data-index="2">
          <img src="patient2.png" alt="" class="profile-photo">
          <div class="patient">
            <p>Regina</p>
            <p>68 Jahre</p>
            <ul>
              <li> Herzinsuffizienz diagnostiziert während eines Spitalaufenthalts aufgrund eines akuten Herzversagens,
                leichter Eisenmangel und erniedrigte LVEF</li>
              <li>Starke Müdigkeit, Kurzatmigkeit und Verschlimmerung der Herzinsuffizienz-Symptome</li>
            </ul>
            <div class="under-ul">ESC-Guidelines empfehlen intravenöse Substitution mit Eisencarboxymaltose bei kürzlich hospitalisierten, symptomatischen Herzinsuffizienz-Patienten mit erniedrigtem LVEF (≤50%)2</div>
          </div>
        </div>
        <div id="patient-details4" class="patient-details" data-index="3">
          <img src="patient3.png" alt="" class="profile-photo">
          <div class="patient">
            <p>Rolf</p>
            <p>76 Jahre</p>
            <ul>
              <li>Leidet an chronischer Nierenerkrankung im Stadium 4 und Hypertonie, begleitet von diagnostisch
                belegter Eisenmangelanämie</li>
              <li>Müdigkeit, starke Abgeschlagenheit und allgemeines Unwohlsein</li>
              <li>Orale Eisensubstitution führte zu gastrointestinalen Nebenwirkungen</li>
            </ul>
            <div class="under-ul">Bei Unverträglichkeit von oral aufgenommenem Eisen ist eine intravenöse Eisensubstitution indiziert</div>
          </div>
        </div>
        <div id="patient-details5" class="patient-details" data-index="4">
          <img src="patient2.png" alt="" class="profile-photo">
          <div class="patient">
            <p>Anna</p>
            <p>32 Jahre</p>
            <ul>
              <li>Morbus Crohn diagnostiziert im Jahr 2003, partielle Darmresektion erfolgte 2017, diagnostisch belegte
                Eisenmangelanämie</li>
              <li>Starke Müdigkeit, Verdauungsprobleme, häufiger und langanhaltender Durchfall, niedriges Körpergewicht
              </li>
            </ul>
            <div class="under-ul">Intravenöse Eisensubstitution wird laut ECCO-Guidelines als Erstlinientherapie bei IBD-Patienten mit Hb-Spiegel unter 100 mg/l empfohlen2</div>
          </div>
        </div>
        <div id="patient-details6" class="patient-details" data-index="5">
          <img src="patient4.png" alt="" class="profile-photo">
          <div class="patient">
            <p>sssssssssssssssss</p>
            <p>27 Jahre</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="middle1">
    <p class="text">
      Eisencarboxy<br>-maltose<br>
      (ECM)
    </p>
  </div>
  </div>

Thiết kế website giá rẻ

Danh mục

Not working addListener in rotating-slider