Losowanie z podanych liczb

Question

Jestem początkujący i nw jak dokładnie to opisać. Szukałem rozwiązania ale nie spotkałem sie z podobnym zagadnieniem. Opisze najlepiej jak umiem.

Zamysł jest następujący: po wpisaniu trzech liczb w 3 różne pola (o ID równym: l1, l2, l3 ) na stronie losuje ona jedną z nich. Niestety nie wiem jak i które ID powinienem przypisać do zmiennej "numer". Funkcja przypisana jest do zdarzenia onclick i wypisywana w div'ie "wynik".

	var numer = Math.floor(Math.random()*3)+1;

	function losuj()
			{
				var liczba1 = document.getElementById(l1).value;
				var liczba2 = document.getElementById(l2).value;
				var liczba3 = document.getElementById(l3).value;
				
				numer = 
				
				var wynik = "";
				
				wynik = wynik + numer;
				
				document.getElementById("wynik").innerHTML = wynik;
				
			}
			
	

           

Answer 1

Na początku nauki programowania rozwiązanie polega na ułożeniu liczb w nowej tablicy i wylosowaniu elementu z tejże tablicy:

function losuj() {
  var liczba1 = document.getElementById(l1).value;
  var liczba2 = document.getElementById(l2).value;
  var liczba3 = document.getElementById(l3).value;

  var numer = Math.floor(Math.random() * 3);

  var liczby = [liczba1, liczba2, liczba3];
  var wynik = liczby[numer];

  document.getElementById("wynik").innerHTML = wynik;
}

 

Ulepszając ten kod:

// Zmiana języka z polskiego na angielski

// Pobieranie referencji do elementów w DOM tylko na początku działania programu:
const inputElements = document.querySelectorAll('.jakas-wspodzielona-klasa')
const outputElement = document.querySelector('#wynik')

function random () {
  // [...inputElements] <-- zamiana obiektu tablicopodobnego na tablicę
  // .map <-- zmiana każdego elementu tablicy z inputa na liczbę
  const values = [...inputElements].map(input => parseFloat(input.value))
  
  // Math.random() * values.length <-- wylosowanie liczby z przedziału <0; "liczby elementów w tablicy values")
  // >> 0    <-- przesunięcie bitowe o 0 w prawo (ekwiwalent Math.floor)
  const randomValue = values[Math.random() * values.length >> 0]
  
  // Zmiana innerHTML na textContent <-- dobra praktyka zapobiegająca przypadkowemu tworzeniu podatności XSS
  outputElement.textContent = randomValue
}

Warto też zamienić onclick na addEventListener, aby rozdzielić warstwę treści od warstwy logiki

Comments

Na początku nauki programowania

 +

przesunięcie bitowe o 0 w prawo (ekwiwalent Math.floor)

Serio? :D

---

Jak podam pierwszy kod - osoba pytająca będzie zadowolona, że jej zaczęło działać, a pół forum da mi minusa

Jak podam drugi kod - osoba pytająca prawdopodobnie niewiele zrozumie, więc niepotrzebnie piszę odpowiedź

Ale jak podam oba - stonks! : D

---

@niezalogowany,  Dzięki za pomoc na pewno mi to pomoże :D. Dodam jeszcze tak żeby wszystko było kompletne: 

w moim kodzie był błąd:  document.getElementById(l1)    id tutaj nie jest w "" powinno to wyglądać tak:  document.getElementById("l1")   analogicznie l2 i l3 też.

 

Answer 2

Możesz wszystkie liczby wrzucić do tablicy i wylosować jedną w następujący sposób:

var numer = liczby[Math.floor(Math.random() * liczby.length)];

Answer 3

    <input type="number" id=l0 value="1">
    <input type="number" id=l1 value="2">
    <input type="number" id=l2 value="3">
    <button id="draw">Losuj</button>
    <pre>Wylosowano: <span id="result"></span></pre>

<script>
    const b_draw = document.getElementById("draw");
    const result = document.getElementById("result");
    b_draw.addEventListener("click", () => {
        const draw = Math.random() * 3 >> 0;
        result.textContent = document.getElementById(`l${draw}`).value;
    })
</script>