Где-то явная ошибка, но где?

Question

[Darkness]

Ошибка в JS думаю, просто не показывает один из блоков :с

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
let randomItem = getRandomArbitrary(0,3)
  if(window.innerWidth < 414) {
document.getElementsByClassName('.music')[randomItem].style.display="block";
}

.music {
        display: none;
    }

<div class="music">
            <img src="audio1.jpg" width="290px" height="280px" />
            <p>Citizen — Yellow Love</p>
            <audio src="6666.mp3" controls>Citizen — Yellow Love</audio>
          </div>
          <div class="music">
            <img src="audio22.jpg" width="300px" height="280px" />
            <p>Low Roar- Don't Be So Serious</p>
            <audio src="7777.mp3" controls></audio>
          </div>
          <div class="music">
            <img src="audio3.jpg" width="290px" height="280px" />
            <p>Mo - Mercy</p>
            <audio src="8888.mp3" controls></audio>
          </div>

UPD

С помощью многих внизу, изменили, но он все также не показывает рандомный блок :

function getRandomArbitrary(min, max) {
  return  Math.floor(min + Math.random() * (max + 1 - min))
}
let randomItem = getRandomArbitrary(0,2)
  if(window.innerWidth < 414) {
document.getElementsByClassName('.music')[randomItem].style.display="block";
}

Comments

[Сергей Горячев]

А css, простите, тут каким хером приплелся в теги?)

[Darkness]

Сергей Горячев, убран

Answer 1

[imhuman]

randomItem должно быть целым, getRandomArbitrary возвращает float

function getRandomArbitrary(min, max) {
  return  Math.floor(min + Math.random() * (max + 1 - min))
}

И вместо (0, 3) в вашем случае надо (0, 2)

Comments

[Darkness]

function getRandomArbitrary(min, max) {
return Math.floor(min + Math.random() * (max + 1 - min))
}
let randomItem = getRandomArbitrary(0,2)
if(window.innerWidth < 414) {
document.getElementsByClassName('.music')[randomItem].style.display="block";
}

Но нет, элементы так и не появляются :с

[imhuman]

Попробуй убрать условие, может внутрь него не попадаем

[Darkness]

imhuman, не-а , и убрал , и увеличил и больше меньше ставил. хммм...

[imhuman]

Убери точку в классе. Все работает https://jsfiddle.net/zh98xbud/

[Darkness]

Да! Ты был прав! Все отлично! Все работает !

Answer 2

[Tom Nolane]

у вас с вычислениями непорядок

введите в консоле разрабочтика

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
let randomItem = getRandomArbitrary(0,3)
randomItem // вывод: 0.6108746700365573
document.getElementsByClassName('.music')[randomItem] // undefined

UPD

как написал imhuman,

return  Math.floor(min + Math.random() * (max + 1 - min))

примерно решает вашу проблему (где min = 0, max =2)

Comments

[Darkness]

Т.е... что нужно изменить ? getRandomArbitrary, а именно (0.3) или max-min.

Не доходит :с

[Tom Nolane]

Math.random() - возвращает числа из диапазона [0, 1) (, то есть, от 0 (включительно) до 1 (но не включая 1))
умножая это число на любое другое, у вас всегда будет менее 1(единицы) итоговый результат (randomItem)

далее вы используете оператов if, который проверяет ширину экрана браузера и если она менее 414, с помощью document.getElementsByClassName('.music')[ТУТ ВАШЕ ЧИСЛО, к ПРИМЕРУ 0.6108746700365573]

document.getElementsByClassName('.music')[0.6108746700365573]

пытаетесь найти элемент в массиве под индексом 0.6108746700365573.... индексы бывают от 0, до много)
но целые числа должны быть, не дробные. А у вас дробные

[Tom Nolane]

Антон Добрынин, как написал imhuman примерно решает вашу проблему

[Darkness]

Tom Nolane, function getRandomArbitrary(min, max) {
return Math.floor(min + Math.random() * (max + 1 - min))
}
let randomItem = getRandomArbitrary(0,2)
if(window.innerWidth < 414) {
document.getElementsByClassName('.music')[randomItem].style.display="block";
}

Но нет, элементы так и не появляются :с

Answer 3

[Николай Чуприк]

Сделайте для начала floor, а там поглядим

Math.floor( Math.random() * (max - min) + min)

Comments

[Darkness]

function getRandomArbitrary(min, max) {
return Math.floor(min + Math.random() * (max + 1 - min))
}
let randomItem = getRandomArbitrary(0,2)
if(window.innerWidth < 414) {
document.getElementsByClassName('.music')[randomItem].style.display="block";
}

Но нет, элементы так и не появляются :с

Answer 4

[mihailv88]

Как вам уже сказали, у вас дробное число, а должно вернуть целое.

function getRandomArbitrary(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

Проверил в консоли, возвращает 0, 1 или 2.

Comments

[Darkness]

function getRandomArbitrary(min, max) {
return Math.floor(min + Math.random() * (max + 1 - min))
}
let randomItem = getRandomArbitrary(0,2)
if(window.innerWidth < 414) {
document.getElementsByClassName('.music')[randomItem].style.display="block";
}

Но нет, элементы так и не появляются :с