Как присвоить радиобаттону определенный цвет?

Question

Сама задача звучит так: "В теле документа расположена радиогруппа из нескольких радиокнопок с указанием цвета и таблица размером 5*5. Наведение мыши на ячейку таблицы закрашивает ячейку в цвет, соответствующий выбранной радиокнопке. Когда мышь уходит с ячейки, ее цвет восстанавливается. Клик мыши по ячейке закрашивает всю строку таблицы выбранным цветом."

Мой код такой:

<html>
    <head>
        <title>
         Лабораторная работа 1   
        </title>
        <style> 
            table, th, td, tr{
                border: 2px solid khaki;
            }
            table, tr, th, td {
                padding: 20px;
            }
        </style>
    </head> 
    <body>
        <script>
        


        
        </script>
        <table>  <h3><b>Таблица:</b></h3>
            
            <tr> 
                <th id=1> </th> 
                <th> </th> 
                <th> </th>
                <th> </th>
                <th> </th>
            </tr>
            <tr>
                <td>  </td>
                <td>  </td>
                <td>  </td>
                <td>  </td>
                <td>  </td>
            </tr>
            <tr>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
            <tr> 
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
            <tr> 
                <td>  </td>
                <td>  </td>
                <td>  </td>
                <td>  </td>
                <td>  </td>
            </tr>
        </table>
        <input type='radio' name="r1"> <label> Тыкай раз - Красный </label> <br>
        <input type='radio' name="r1"> <label> Тыкай два - Зеленый </label> <br>
        <input type='radio' name="r1"> <label> Тыкай три - Синий   </label> <br>
        <input type='radio' name="r1"> <label> Тыкай раз - Голубой </label> <br>
    </body>
</html>

Вопрос такой: Какая команда чтобы присвоить радиобаттону цвет, я понимаю что скорее всего через

???.addEventListener('click')
???.addEventListener('focus')
???.addEventListener('blur')

Answer 1

Можно сделать так..

let tr = document.querySelectorAll('tr');
let inp = document.querySelectorAll('input');

tr.forEach(e => {
  for(var i = 0; i<e.children.length; i++){
    giveMeListener(e.children[i])
  }
})
function giveMeListener(e){
  e.addEventListener('click', () => {
    e.parentNode.style.background = getColor();
  })
  e.addEventListener('mouseover', () => {
    e.style.background = getColor();
  })
  e.addEventListener('mouseout', () => {
    e.style.background = "";
  })
}
function getColor(){
  let color = "";
  inp.forEach(e => {
    if (e.checked) color = e.dataset.color;
  })
  return color;
}

table,
th,
td,
tr {
  border: 2px solid khaki;
}

table,
tr,
th,
td {
  padding: 9px;
}

<table>
  <h3><b>Таблица:</b></h3>

  <tr>
    <th> </th>
    <th> </th>
    <th> </th>
    <th> </th>
    <th> </th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
<input type='radio' name="r1" data-color='red'> <label> Тыкай раз - Красный </label> <br>
<input type='radio' name="r1" data-color='green'> <label> Тыкай два - Зеленый </label> <br>
<input type='radio' name="r1" data-color='blue'> <label> Тыкай три - Синий   </label> <br>
<input type='radio' name="r1" data-color='skyblue'> <label> Тыкай раз - Голубой </label> <br>

БЛОГ НА HUSL

Как присвоить радиобаттону определенный цвет?

Ответы (1 шт):