如何在函数内的if条件中使用样式可见性?

我现在正在学习条件和表，我试图获得月份的表，并使用select元素来选择月份-以及相应地隐藏月份的天数(例如选择二月将隐藏30和31天的盒子)。它不能工作，我将非常感谢你的帮助。

<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';
}
}

我也明白我的代码很麻烦，我可能没有正确地命名变量;我也希望你能给点建议。

好的。我修改了你的代码。您可以通过将您的代码与此代码进行比较来检查您的错误。我还更改了日期30和31的类名。代码如下:-

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>

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';
}
}

你用的是April而不是april你应该用小写因为这是你在html中使用的值属性
下一件事是你使用===而不是=

相关内容

最新更新

热门标签：