Блог

Главная - Вопросы по программированию - HTML / Js / Css — выберите случайный элемент для изменения цвета

HTML / Js / Css — выберите случайный элемент для изменения цвета

#javascript #html #css #colors #box

#javascript #HTML #css #Цвет #поле

Вопрос:

По сути, это (своего рода) мое первое кодирование! Я пытаюсь создать HTML-игру для размещения на веб-сайте.

В нем 9 синих полей. И некоторые из этих полей будут оранжевыми. Всякий раз, когда вы нажимаете на оранжевую рамку, она становится синей! Задача состоит в том, чтобы сделать все поля синими, как можно быстрее.

Когда все поля будут синими, вы можете нажать кнопку, чтобы обновить страницу, что даст другую пару оранжевых полей. У меня есть некоторый код, который частично работает.

Я не могу понять, как заставить мой код случайным образом выбирать некоторые поля, чтобы сделать их оранжевыми. (Я также не сделал кнопку для обновления страницы). Я не слишком хорош в объяснении или кодировании, но вот что у меня есть на данный момент.

 function setColor(e) {
  var target = e.target,
    count =  target.dataset.count;

  target.style.backgroundColor = count === 1 ? "#08AED4" : '#D4A108';
  target.dataset.count = count === 1 ? 0 : 1;

}  
 #box1 {
  position: relative;
  border-top-left-radius: 80px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box2 {
  position: relative;
  bottom: 10px;
  border-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box3 {
  position: relative;
  bottom: 20px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 80px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box4 {
  position: relative;
  left: 215px;
  bottom: 678px;
  border-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box5 {
  position: relative;
  left: 215px;
  bottom: 688px;
  border-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box6 {
  position: relative;
  left: 215px;
  bottom: 698px;
  border-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box7 {
  position: relative;
  left: 430px;
  bottom: 1355px;
  border-top-left-radius: 25px;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box8 {
  position: relative;
  left: 430px;
  bottom: 1366px;
  border-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box9 {
  position: relative;
  left: 430px;
  bottom: 1377px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 80px;
  border-bottom-left-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}  
 <p type="button" id="box1" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box2" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box3" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box4" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box5" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box6" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box7" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box8" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box9" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>

Комментарии:

1. Добро пожаловать в мир программирования! Вы могли бы использовать Math.random() , чтобы получить случайное число, представляющее один из ваших блоков, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /. … Делаем что-то вроде: const boxNumber = getRandomInt(1, 10); чтобы получить какое поле, затем получаем поле с помощью document.getElementById , что-то вроде: document.getElementById(`box${boxNumber}`).style.backgroundColor = "#08AED4"

2. @MarkusMaga Не совсем уверен, отвечаю я вам или нет, ха-ха. Я не могу в этом разобраться. Я использую редактор W3schools TryIt и codepen.io . Когда я вставляю const boxNumber = getRandomInt(1, 10); document.getElementById(`box${boxNumber}`).style.backgroundColor = "#08AED4" в JS-часть codepen.io , В нем говорится: «Неперехваченная ошибка ссылки: getRandomInt не определена».

3. Если вы проверите ссылку, вы можете найти пример того, как написать getRandomInt функцию! В комментариях немного запутанно function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min) min); }

4. @MarkusMaga Я думаю, что у меня получилось! но он выполняет только одно поле за раз, как я могу заставить его выбирать 3, или 4, или 5 полей одновременно?

5. Вы могли бы использовать цикл for w3schools.com/js/js_loop_for.asp или цикл while w3schools.com/js/js_loop_while.asp чтобы выбрать случайное поле несколько раз. Поскольку он случайный, вы, конечно, можете в конечном итоге выбрать одно и то же поле несколько раз. Итак, вы можете попробовать создать while цикл и проверить, имеет ли поле, которое вы пытаетесь изменить, уже нужный вам цвет, если это так, продолжайте цикл, пока не найдете тот, который вы не изменили.

Ответ №1:

вы можете использовать эту функцию (для одного поля) и повторить ее в цикле для большего количества оранжевых полей

 function selectBoxes() {

        var box1 = document.getElementById('box1'); //storing boxen in variables
        var box2 = document.getElementById('box2');
        var box3 = document.getElementById('box3');
        var box4 = document.getElementById('box4');
        var box5 = document.getElementById('box5');
        var box6 = document.getElementById('box6');
        var box7 = document.getElementById('box7');
        var box8 = document.getElementById('box8'); 
        var box9 = document.getElementById('box9');
        
        var boxes = [];
        boxes.push(box1, box2, box3, box4, box5, box6, box7, box8, box9); //putting boxes in an array
        console.log(boxes);
        
        
        var boxToChangeNum = Math.floor(Math.random() * 9); //random number from 0 to 8
        boxes[boxToChangeNum].style.backgroundColor = "#D4A108"; //changing style of the selected box

    }