Записать фон ячейки таблицы в переменную

Question

У меня есть расписание предметов.

Надо рандомно выделять (заливать фон) красным цветом одну ячейку с предметом при загрузке страницы.
Пользователь после загрузки страницы может выбрать(или нажать на ячейку или с помощью кнопки и списков вверху страницы) другую ячейку, после чего та станет красным, а предыдущая закрасится. (т.е. выбранная буде одна).
При наведении курсором на любую ячейку она должна становится зелёной ,если убрать курсор, то она становится прежним цветом. (ну как с ссылкой).

Задание вроде бы и не сложное, но возникли сложности...

Как запомнить цвет ячейки в переменную при наведении на нее курсором, это нужно чтобы когда убираешь курсор, то цвет возвращался обратно (т.е. если был красный, то красный и остался после того как убираешь курсор). Т.е. я хочу запомнить цвет в переменную col, а потом с помощью if реализовать всё это.

Сейчас у меня любая ячейка при наведении красится в серый, т.е. если я даже выбираю она подсвечивается красным, потом убираю курсор и она серая.

Помогите исправить.

.divTable{
    display: table;
    width: 100%;
    background-color:#aaa;
 
}
.divTableRow {
    display: table-row;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
}
.divTableCell, .divTableHead {
    display: table-cell;
    padding: 3px 10px;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}
.divTableFoot {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}
.divTableBody {
    display: table-row-group;
}
 
 input[type="button"]{
    width:185px;  
    margin-top: 5px;
}
 
#SelectMyLove,#SelectMyLove2{
width:200px;
margin-top: 5px;
 }
 
.Table1{
width:100%;
background-color:#eee;
border:1px solid black;
}
 
td,tr{
border:1px solid black;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Лаба 4 </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<script>
window.onmousemove = () => {
      document.querySelectorAll('.call').forEach((v) => {
        var col;
        /*if(window.e.backgroundColor === 'red'){
                col = 'red';
            }
        else if(window.e.backgroundColor === '#eee'){
                col = '#eee';
            }*/
        v.addEventListener('mouseover', (e) => {
            e.target.style.background = 'green';
        });
        
        v.addEventListener('mouseout', (e) => {
             e.target.style.background = "#eee";
        });

    });
  };

    function reset()
    {
       document.querySelectorAll('td').forEach(item => {item.style.backgroundColor = '#eee'});
    }

    function highlightcell(trVal, tdVal){
        const trValue = trVal || document.querySelector('#SelectMyLove').value,
        tdValue = tdVal || document.querySelector('#SelectMyLove2').value;
        const css = `.Table1 :nth-child(${tdValue}) :nth-child(${trValue})`,
        cell = document.querySelector(css);
        console.log(cell);
        if (cell)
        {   
            reset();
            cell.style.backgroundColor = 'red';           
        }
    }

    function func(obj) {
        reset();
        obj.style.backgroundColor = 'red';
    };

    window.onload = () => {            
        const trVal = 1 + Math.floor(Math.random() * (4 + 1)), //Math.floor - окргугляет
              tdVal = 2 + Math.floor(Math.random() * (4 + 1));    
          highlightcell(trVal, tdVal);
    }
</script>

    <div class="divTableBody">
    <div class="divTableRow">
    <div class="divTableCell">
        <p><b>Дни недели:</b><br>
    <select id='SelectMyLove'>
    <option disabled>Выберите день недели</option>
      <option value="1">Понедельник</option>
      <option value="2">Вторник</option>
      <option value="3">Среда</option>
      <option value="4">Четверг</option>
      <option value="5">Пятница</option>
    </select>
    </div>
    <div class="divTableCell">
    <p><b>Пары:</b><br>
    <select id='SelectMyLove2'>
    <option disabled>Выберите пару</option>
      <option value="2">Пара 1</option>
      <option value="3">Пара 2</option>
      <option value="4">Пара 3</option>
      <option value="5">Пара 4</option>
      <option value="6">Пара 5</option>
      <option value="7">Пара 6</option>
    </select>
    </div>
    <div class="divTableCell">
        <p><b></b><br> <input  type="button"   value="Поиск"  onclick="highlightcell()"/>
    </div>
    </div>
    </div>
    </div> 
       
          
    <table class="Table1" id='tabl'>
        <tr>
            <td >Понедельник</td>
            <td>Вторник</td>
            <td>Среда</td>
            <td>Четверг</td>
            <td>Пятница</td>
        </tr>
        <tr>
            <td id="m1"  class="call" onclick="func(this);">География</td>
            <td id="m2"  class="call" onclick="func(this);">Рисование</td>
            <td id="m3"  class="call" onclick="func(this);">Музыка</td>
            <td id="m4"  class="call" onclick="func(this);">Геометрия</td>
            <td id="m5"  class="call" onclick="func(this);">Алгебра</td>
        </tr>
        <tr>
            <td id="m6"  class="call" onclick="func(this);">Музыка</td>
            <td id="m7"  class="call" onclick="func(this);">Химия</td>
            <td id="m8"  class="call" onclick="func(this);">Плаванье</td>
            <td id="m9"  class="call" onclick="func(this);">Русский</td>
            <td id="m10" class="call" onclick="func(this);">Английский</td>
        </tr>
        <tr>
            <td id="m11" class="call" onclick="func(this);">Математика</td>
            <td id="m12" class="call" onclick="func(this);">Физика</td>
            <td id="m13" class="call" onclick="func(this);">Гражданственность</td>
            <td id="m14" class="call" onclick="func(this);">Химия</td>
            <td id="m15" class="call" onclick="func(this);">Английский</td>
        </tr>
        <tr>
            <td id="m16" class="call" onclick="func(this);">Русский</td>
            <td id="m17" class="call" onclick="func(this);">Обществознание</td>
            <td id="m18" class="call" onclick="func(this);">ОБЖ</td>
            <td id="m19" class="call" onclick="func(this);">Математика</td>
            <td id="m20" class="call" onclick="func(this);">Литература</td>
        </tr>
        <tr>
            <td id="m21" class="call" onclick="func(this);">Биология</td>
            <td id="m22" class="call" onclick="func(this);">Физкультура</td>
            <td id="m23" class="call" onclick="func(this);">Информатика</td>
            <td id="m24" class="call" onclick="func(this);">Экономика</td>
            <td id="m25" class="call" onclick="func(this);">История</td>
        </tr>
        <tr>
            <td id="m26"class="call" onclick="func(this);">Литература</td>
            <td id="m27" class="call" onclick="func(this);">Труды</td>
            <td id="m28"class="call" onclick="func(this);">Алгебра</td>
            <td id="m29"class="call" onclick="func(this);">Обществознание</td>
            <td id="m30"class="call" onclick="func(this);">Информатика</td>
        </tr>
    </table>
</body>
</html>

<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">
    <p><b>Дни недели:</b><br>
<select id='SelectMyLove'>
<option disabled>Выберите день недели</option>
  <option value="1">Понедельник</option>
  <option value="2">Вторник</option>
  <option value="3">Среда</option>
  <option value="4">Четверг</option>
  <option value="5">Пятница</option>
</select>
</div>
<div class="divTableCell">
<p><b>Пары:</b><br>
<select id='SelectMyLove2'>
<option disabled>Выберите пару</option>
  <option value="2">Пара 1</option>
  <option value="3">Пара 2</option>
  <option value="4">Пара 3</option>
  <option value="5">Пара 4</option>
  <option value="6">Пара 5</option>
  <option value="7">Пара 6</option>
</select>
</div>
<div class="divTableCell">
    <p><b></b><br> <input  type="button"   value="Поиск"  onclick="highlightcell()"/>
</div>
</div>
</div>
</div> 
   
      
<table class="Table1" id='tabl'>
    <tr>
        <td >Понедельник</td>
        <td>Вторник</td>
        <td>Среда</td>
        <td>Четверг</td>
        <td>Пятница</td>
    </tr>
    <tr>
        <td id="m1"  class="call" onclick="func(this);">География</td>
        <td id="m2"  class="call" onclick="func(this);">Рисование</td>
        <td id="m3"  class="call" onclick="func(this);">Музыка</td>
        <td id="m4"  class="call" onclick="func(this);">Геометрия</td>
        <td id="m5"  class="call" onclick="func(this);">Алгебра</td>
    </tr>
    <tr>
        <td id="m6"  class="call" onclick="func(this);">Музыка</td>
        <td id="m7"  class="call" onclick="func(this);">Химия</td>
        <td id="m8"  class="call" onclick="func(this);">Плаванье</td>
        <td id="m9"  class="call" onclick="func(this);">Русский</td>
        <td id="m10" class="call" onclick="func(this);">Английский</td>
    </tr>
    <tr>
        <td id="m11" class="call" onclick="func(this);">Математика</td>
        <td id="m12" class="call" onclick="func(this);">Физика</td>
        <td id="m13" class="call" onclick="func(this);">Гражданственность</td>
        <td id="m14" class="call" onclick="func(this);">Химия</td>
        <td id="m15" class="call" onclick="func(this);">Английский</td>
    </tr>
    <tr>
        <td id="m16" class="call" onclick="func(this);">Русский</td>
        <td id="m17" class="call" onclick="func(this);">Обществознание</td>
        <td id="m18" class="call" onclick="func(this);">ОБЖ</td>
        <td id="m19" class="call" onclick="func(this);">Математика</td>
        <td id="m20" class="call" onclick="func(this);">Литература</td>
    </tr>
    <tr>
        <td id="m21" class="call" onclick="func(this);">Биология</td>
        <td id="m22" class="call" onclick="func(this);">Физкультура</td>
        <td id="m23" class="call" onclick="func(this);">Информатика</td>
        <td id="m24" class="call" onclick="func(this);">Экономика</td>
        <td id="m25" class="call" onclick="func(this);">История</td>
    </tr>
    <tr>
        <td id="m26"class="call" onclick="func(this);">Литература</td>
        <td id="m27" class="call" onclick="func(this);">Труды</td>
        <td id="m28"class="call" onclick="func(this);">Алгебра</td>
        <td id="m29"class="call" onclick="func(this);">Обществознание</td>
        <td id="m30"class="call" onclick="func(this);">Информатика</td>
    </tr>
</table>

Answer 1

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Лаба 4 </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<script>
window.onmousemove = () => {
      document.querySelectorAll('.call').forEach((v) => {
        var col;
        /*if(window.e.backgroundColor === 'red'){
                col = 'red';
            }
        else if(window.e.backgroundColor === '#eee'){
                col = '#eee';
            }*/
        v.addEventListener('mouseover', (e) => {
            e.target.style.backgroundColor = 'green';
        });
        
        v.addEventListener('mouseout', (e) => {
            if (e.target.style.backgroundColor == "green"){ // если ячейка закрашена в зеленый
                e.target.style.backgroundColor = "#eee";// меняем на серый
            }
        });

    });
  };

    function reset()
    {
       document.querySelectorAll('td').forEach(item => {item.style.backgroundColor = '#eee'});
    }

    function highlightcell(trVal, tdVal){
        const trValue = trVal || document.querySelector('#SelectMyLove').value,
        tdValue = tdVal || document.querySelector('#SelectMyLove2').value;
        const css = `.Table1 :nth-child(${tdValue}) :nth-child(${trValue})`,
        cell = document.querySelector(css);
        console.log(cell);
        if (cell)
        {   
            reset();
            cell.style.backgroundColor = 'red';           
        }
    }

    function func(obj) {
        col = obj.style.backgroundColor;
        console.log(obj, col);
        reset();
        obj.style.backgroundColor = 'red';
    };

    window.onload = () => {            
        const trVal = 1 + Math.floor(Math.random() * (4 + 1)), //Math.floor - окргугляет
              tdVal = 2 + Math.floor(Math.random() * (4 + 1));    
          highlightcell(trVal, tdVal);
    }
</script>

    <div class="divTableBody">
    <div class="divTableRow">
    <div class="divTableCell">
        <p><b>Дни недели:</b><br>
    <select id='SelectMyLove'>
    <option disabled>Выберите день недели</option>
      <option value="1">Понедельник</option>
      <option value="2">Вторник</option>
      <option value="3">Среда</option>
      <option value="4">Четверг</option>
      <option value="5">Пятница</option>
    </select>
    </div>
    <div class="divTableCell">
    <p><b>Пары:</b><br>
    <select id='SelectMyLove2'>
    <option disabled>Выберите пару</option>
      <option value="2">Пара 1</option>
      <option value="3">Пара 2</option>
      <option value="4">Пара 3</option>
      <option value="5">Пара 4</option>
      <option value="6">Пара 5</option>
      <option value="7">Пара 6</option>
    </select>
    </div>
    <div class="divTableCell">
        <p><b></b><br> <input  type="button"   value="Поиск"  onclick="highlightcell()"/>
    </div>
    </div>
    </div>
    </div> 
       
          
    <table class="Table1" id='tabl'>
        <tr>
            <td >Понедельник</td>
            <td>Вторник</td>
            <td>Среда</td>
            <td>Четверг</td>
            <td>Пятница</td>
        </tr>
        <tr>
            <td id="m1"  class="call" onclick="func(this);">География</td>
            <td id="m2"  class="call" onclick="func(this);">Рисование</td>
            <td id="m3"  class="call" onclick="func(this);">Музыка</td>
            <td id="m4"  class="call" onclick="func(this);">Геометрия</td>
            <td id="m5"  class="call" onclick="func(this);">Алгебра</td>
        </tr>
        <tr>
            <td id="m6"  class="call" onclick="func(this);">Музыка</td>
            <td id="m7"  class="call" onclick="func(this);">Химия</td>
            <td id="m8"  class="call" onclick="func(this);">Плаванье</td>
            <td id="m9"  class="call" onclick="func(this);">Русский</td>
            <td id="m10" class="call" onclick="func(this);">Английский</td>
        </tr>
        <tr>
            <td id="m11" class="call" onclick="func(this);">Математика</td>
            <td id="m12" class="call" onclick="func(this);">Физика</td>
            <td id="m13" class="call" onclick="func(this);">Гражданственность</td>
            <td id="m14" class="call" onclick="func(this);">Химия</td>
            <td id="m15" class="call" onclick="func(this);">Английский</td>
        </tr>
        <tr>
            <td id="m16" class="call" onclick="func(this);">Русский</td>
            <td id="m17" class="call" onclick="func(this);">Обществознание</td>
            <td id="m18" class="call" onclick="func(this);">ОБЖ</td>
            <td id="m19" class="call" onclick="func(this);">Математика</td>
            <td id="m20" class="call" onclick="func(this);">Литература</td>
        </tr>
        <tr>
            <td id="m21" class="call" onclick="func(this);">Биология</td>
            <td id="m22" class="call" onclick="func(this);">Физкультура</td>
            <td id="m23" class="call" onclick="func(this);">Информатика</td>
            <td id="m24" class="call" onclick="func(this);">Экономика</td>
            <td id="m25" class="call" onclick="func(this);">История</td>
        </tr>
        <tr>
            <td id="m26"class="call" onclick="func(this);">Литература</td>
            <td id="m27" class="call" onclick="func(this);">Труды</td>
            <td id="m28"class="call" onclick="func(this);">Алгебра</td>
            <td id="m29"class="call" onclick="func(this);">Обществознание</td>
            <td id="m30"class="call" onclick="func(this);">Информатика</td>
        </tr>
    </table>
</body>
</html>

БЛОГ НА HUSL

Записать фон ячейки таблицы в переменную

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