Posyłanie argumentów do funkcji setSlide(slideNumber)

Question

Mam pięć spanów z id

<span id="slide-1">[ 1 ]</span>
        <span id="slide-2">[ 2 ]</span>
        <span id="slide-3">[ 3 ]</span>
        <span id="slide-4">[ 4 ]</span>
        <span id="slide-5">[ 5 ]</span>

i funkcję setSlide do której chcę posłać argument z liczbą 1-5

function setSlide(slideNumber)
    {
        clearTimeout(timer1);
        clearTimeout(timer2);

        schowaj();

        setTimeout("changeSlide()", 500);
    }

Do której próbuję wysłać argument za pomocą tego zdarzenia

$("#slide-"+slideNumber).onclick=setSlide;

Problem w tym, że po kliknięciu na dowolny span nic się nie dzieje, nie wiem jak to powinno działać, czy zrobiłem gdzieś błąd w kodzie

cały jscript

let slideNumber = Math.floor(Math.random()*5)+1;

    let timer1 = 0;
    let timer2 = 0;
    function setSlide(slideNumber)
    {
        clearTimeout(timer1);
        clearTimeout(timer2);

        schowaj();

        setTimeout("changeSlide()", 500);
    }

    function hide()
    {
        $('#slider').fadeOut(500);
    }

    function changeSlide()
    {
        slideNumber++; if (slideNumber>5) slideNumber=1;

        let file = "<img src=\"slides/slide"+slideNumber+".png\">";

        document.getElementById('slider').innerHTML=file;

        $('#slider').fadeIn(500);
        timer1 = setTimeout('changeSlide()', 5000);
        timer2 = setTimeout('hide()', 4500);
    }


    $("#slide-"+slideNumber).onclick=setSlide;
    window.onload=changeSlide;

Proszę o pomoc w posłaniu argumentu 1-5 do funkcji setSlide()

Answer 1

Skoro masz ustawioną slideNumber jako zmienną globalną,

let slideNumber = Math.floor(Math.random()*5)+1;

której przypisywana jest losowa liczba

to proponuję taki zapis

const SLIDE_COUNT = 5;
let slideNumber = 0, timer1;

window.onload = function()
{
  slideNumber = Math.floor(Math.random() * SLIDE_COUNT) + 1;
  changeSlide();
}

 

dla bloku span-ów proponuję dodanie "kontenera" i użycie Event Delegation

<div class="container">
  <span id="slide-1">[ 1 ]</span>
  <span id="slide-2">[ 2 ]</span>
  <span id="slide-3">[ 3 ]</span>
  <span id="slide-4">[ 4 ]</span>
  <span id="slide-5">[ 5 ]</span>
  <div id="slider"></div>
</div>

i proponuje taki zapis

function setSlide(event)
{
  if (event.target.matches('[id^="slide"]')) 
  {
    slideNumber = event.target.id.replace('slide-', '');
    ...
  }
}

$('.container').on('click', setSlide);

 

Przekazywanie zmiennej slideNumber  jak argument funkcji w tym kontekście nie jest potrzebne, jest globalna jak już wyżej napisałem, więc jest "dostępna" we wszystkich funkcjach.

całość on-line.

Answer 2

Do której próbuję wysłać argument za pomocą tego zdarzenia 

$("#slide-"+slideNumber).onclick=setSlide;

Tutaj nie przekazujesz argumentu do funkcji setSlide. Po pierwsze, zdaje się, że korzystasz z jQuery do obrania elementu, a to zwraca ich kolekcję, która nie posiada property onclick. Jeśli korzystasz z jQuery, to użyj metody click:

$("#slide-"+slideNumber).click(setSlide)

Po drugie, próbujesz przypisać referencję funkcji setSlide do rzekomego onclick elementu (co nie zadziała z powodu opisanego wyżej) - jedyne przekazanie argumentu jest do jQuery (selektor CSS, po którym ma być znaleziony element), a nie do setSlide; ten, jeśli już, to automatycznie otrzyma w parametrze event.

Natomiast, żeby przekazać argument, to jest parę możliwości:

$("#slide-"+slideNumber).click(() => setSlide(slideNumber))

// albo
$("#slide-"+slideNumber).click(setSlide.bind(null, slideNumber))

, albo - skoro slideNumber zawiera się w identyfikatorze elementu - to go pobierz już w funkcji (bez konieczności przekazywania przez parametr):

function setSlide({ target: { id } }) {
  const slideNumber = id.match(/\d+/)?.[0];
  // albo
  // const slideNumber = id.slice(id.indexOf('-') + 1)

  clearTimeout(timer1);
  clearTimeout(timer2);
 
  schowaj();
 
  setTimeout("changeSlide()", 500);
}

Na marginesie: do setTimeout przekaż po prostu changeSlide - nie owijaj tego w string.