How do I use style visibility in an if condition within a function?-CodePudding

I'm learning now if conditions as well as tables, and I'm trying to get a table of the months, and using a select element to choose the month - as well as concealing days of months accordingly (for example selecting February would hide the boxes of days 30 and 31). It's not working and I would very much appreciate your help.

<label for="months-title">Month: </label>
        <select name="months" id="months">
            <option value="">--Select month--</option>
            <option value="january">January</option>
            <option value="february">February</option>
            <option value="march">March</option>
            <option value="april">April</option>
            <option value="may">May</option>
            <option value="june">June</option>
            <option value="july">July</option>
            <option value="august">August</option>
            <option value="september">September</option>
            <option value="october">October</option>
            <option value="november">November</option>
            <option value="december">December</option>
        </select>

        <table class="months-table">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
            </tr>
            <tr>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
            </tr>
            <tr>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
            </tr>
            <tr>
                <td>17</td>
                <td>18</td>
                <td>19</td>
                <td>20</td>
            </tr>
            <tr>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
            </tr>
            <tr>
                <td>25</td>
                <td>26</td>
                <td>27</td>
                <td>28</td>
            </tr>
            <tr class="last-month-tr">
                <td>29</td>
                <td class="thirtieth-month">30</td>
                <td class="thirty-1st-month">31</td>
            </tr>
        </table>

let monthsTable = document.querySelector('.months-table');
let monthsTitle = document.querySelector('.months-title');
let months = document.getElementById('months');
let lastMonthTr = document.querySelector('.last-month-tr');
let thirtyFirstMonth = document.querySelector('.thirty-1st-month');

months.onchange = function daysChange() {
    const selectedMonth = months.value;

    if (selectedMonth === 'April' || selectedMonth === 'June' || selectedMonth === 'September' || selectedMonth === 'November') {
        thirtyFirstMonth.style.visibility === 'hidden';
    } else if (selectedMonth === 'February') {
        lastMonthTr.style.visibility === 'hidden';
    }
}

I also understand my code is quite cumbersome and I might not be naming variables properly; would also appreciate tips for that.

CodePudding user response：

Oky. I modified your code. You can check your mistakes by comparing your code with this code. I also change the name of classes for date 30 and 31. The code is given below:-

let monthsTable = document.querySelector('.months-table');
let monthsTitle = document.querySelector('.months_title');
let months = document.getElementById('months');
let Date_30 = document.querySelector('.Date_30');
let Date_31 = document.querySelector('.Date_31');

months.onchange = function(){
    const selectedMonth = months.value;
    if (selectedMonth == 'april' || selectedMonth == 'june' || selectedMonth == 'september' || selectedMonth == 'november') {
        Date_31.style.visibility = 'hidden';
    } else if (selectedMonth == 'february') {
        Date_30.style.visibility = 'hidden';
        Date_31.style.visibility = 'hidden';
    }
    else{
        Date_30.style.visibility = 'visible';
        Date_31.style.visibility = 'visible';
    }
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label for="months-title" class="months_title">Month: </label>
    <select name="months" id="months">
        <option value="">--Select month--</option>
        <option value="january">January</option>
        <option value="february">February</option>
        <option value="march">March</option>
        <option value="april">April</option>
        <option value="may">May</option>
        <option value="june">June</option>
        <option value="july">July</option>
        <option value="august">August</option>
        <option value="september">September</option>
        <option value="october">October</option>
        <option value="november">November</option>
        <option value="december">December</option>
    </select>

    <table class="months-table">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>
        <tr>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
        </tr>
        <tr>
            <td>17</td>
            <td>18</td>
            <td>19</td>
            <td>20</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>25</td>
            <td>26</td>
            <td>27</td>
            <td>28</td>
        </tr>
        <tr>
            <td>29</td>
            <td class="Date_30">30</td>
            <td class="Date_31">31</td>
        </tr>
    </table>
</body>
</html>

CodePudding user response：

months.onchange = function daysChange() {
    const selectedMonth = months.value;

    if (selectedMonth === 'april' || selectedMonth === 'june' || selectedMonth === 'september' || selectedMonth === 'november') {
        console.log(thirtyFirstMonth.style)
        thirtyFirstMonth.style.visibility = 'hidden';
    } else if (selectedMonth === 'february') {
        lastMonthTr.style.visibility = 'hidden';
    }
}

You were using April instead of april you should use lowercase because that's what you are using in html value attribute
The next thing was you were using === instead of =