Блог

Главная - Вопросы по программированию - нажмите кнопку, чтобы задать рандомизированный фон изображения (CSS JavaScript jQuery)

нажмите кнопку, чтобы задать рандомизированный фон изображения (CSS JavaScript jQuery)

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Это мой код. Я новичок в JavaScript, поэтому я знаю, что я действительно делаю. По сути, каждый раз, когда нажимается кнопка, новая деталь / изображение Ван Гога должны заполнять фон. Я чувствую, что многие изображения повторяются, и иногда кнопка не работает (новое изображение не появляется при каждом нажатии). В идеале я хотел бы получать новое изображение при каждом нажатии. На данный момент у меня есть только 10 изображений, но может быть добавлено больше. Спасибо за вашу помощь.

HTML

 <!DOCTYPE html>
<html>
   <head>
      <title>VG java project</title>
      <link rel="stylesheet" type="text/css" href="assets/main.css">
    <script src="assets/jquery-3.5.1.min.js"></script>
      <script type="text/javascript" src="assets/main.js"></script>
   </head>
   <body>
    <div class="container1"></div>
      <div class="container">
         <div class="button">
            Do you like Van Gogh? 
         </div>
         
      </div>
   </body>
</html>

CSS

 body {
  font-family: courier new;
  padding: 3rem;
  z-index: 200;
  background: url(gogh4.jpg);
}

.container {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;

}

.item {
  max-width: 960px;
  text-align: center;
}

.button {
    position: absolute;
    left: 50px;
    top: 50px;
  border: 7px double;
  border-color: black;
  padding: 20px;
  font-size: 40px;
  background-color: rgb(225, 186, 253);
  opacity: 80%; 
}

.button:hover {
  background-color: rgb(197, 103, 247);
  color: white;
  cursor: pointer;
  opacity: 90%; 
}

.gogh1 {
  background: url(gogh1.jpg);
}

.gogh2 {
  background: url(gogh3.jpg);
}

.gogh3 {
  background: url(gogh3.jpg);
}

.gogh4 {
  background: url(gogh4.jpg);
}

.gogh5 {
  background: url(gogh5.jpg);
}

.gogh6 {
  background: url(gogh6.jpg);
}

.gogh7 {
  background: url(gogh7.jpg);
}

.gogh8 {
  background: url(gogh8.jpg);
}

.gogh9 {
   background: url(gogh9.jpg);
}

.gogh10 {
   background: url(gogh10.jpg);
}

.highlight {
  font-size: 200px;
}

JavaScript ~ Я использую jQuery кстати

 $(function() {

  $(".button").click(function(){

    let goghs = ["gogh1", "gogh2", "gogh3", "gogh4", 
                "gogh5", "gogh6", "gogh7",  "gogh8",
                "gogh9", "gogh10"]
    let i = Math.floor(Math.random()* goghs.length - Math.random()   2 );
    $("body").toggleClass(goghs[i]);
  });
});

Ответ №1:

Поскольку вы запросили помощь Javascript.

Вот проблема, с которой вы столкнулись в своем коде:

Отредактировано:

 $(function () {

  $(".button").click(function () {

    let goghs = ["gogh1", "gogh2", "gogh3", "gogh4",
      "gogh5", "gogh6", "gogh7", "gogh8",
      "gogh9", "gogh10"
    ]
    let i = Math.floor(Math.random() * goghs.length); //There was no need to add   Random plus 2 to it. You already Selecting a random index from an array(sometimes 'i' value was 10 -> undefined).
    console.log(i, goghs[i]); //logging helps you notice that is nothing wrong with other parts and function runs. only the code itself has some problems.
    $("body").toggleClass(goghs[i]);
  });
});

Ответ №2:

Если «i» равно 2 в первый раз, то в качестве класса добавляется «gogh2».

Если «i» равно 3, во второй раз «gogh3» будет «добавлен» в список классов. «gogh2» все равно будет там.

Затем, если «i» равно 2 в третий раз, он удалит «gogh2», и вы просто останетесь с «gogh3».

Попробуйте:

 $("body").removeClass();
$("body").addClass(goghs[i]);

и покончите с вашей строкой toggleClass.

toggleClass добавит класс в список, если его там нет, и удалит его, если он есть.