Как реализовать кнопку Switch дни месяца, чтобы вычислялось кол-во дней в месяце?
В задании 6 и 7 нужно добавить проверку числовых значений месяцев на выход из диапазона от 1 до 12. Чтобы при введении в эти поля значений вне диапазона - выводило ошибку "Число месяца должно быть больше 1 и меньше 12". В функции dayCountSwitch() нужно реализовать, так же как и в function dayCount()
<!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>
<style>
section {
margin: 50px;
}
table {
width: 250px;
height: 150px;
border: 1px solid #000;
}
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<section>
<p class="title">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus,
similique mollitia illo totam quam temporibus? Nobis veniam porro
corporis cupiditate dolorum, architecto ipsam ratione doloribus
reiciendis ab fugit cum saepe!
</p>
<button type="submit" onclick="changeGreen()">Зеленный</button>
<button type="submit" onclick="changeViolet()">Фиолетовый</button>
</section>
<section>
<button type="submit" class="buttonDate" onclick="showDate()">
Нажмите на меня
</button>
</section>
<section>
<input type="number" name="num1" id="num1" />
<input type="number" name="num2" id="num2" />
<button type="submit" onclick="divide()">Делитель</button>
</section>
<section>
<input type="number" name="num" id="num" />
<button type="submit" onclick="minus()">Минус 17</button>
</section>
<section>
<input type="number" name="valueX" id="valueX" />
<button type="submit" onclick="calculate()">Посчитать формулу</button>
</section>
<section>
<input
type="number"
name="dayCount"
id="dayCount"
placeholder="Номер месяца (1...12)"
/>
<button type="submit" onclick="dayCount()">Дни месяца</button>
</section>
<section>
<input
type="number"
name="dayCount2"
id="dayCount2"
placeholder="Номер месяца (1...12)"
/>
<button type="submit" onclick="dayCountSwitch()">
Switch дни месяца
</button>
</section>
<section>
<table id="table">
<tr id="row">
<td id="col-1" style="background-color: aqua"></td>
<td id="col-2" style="background-color: bisque"></td>
<td id="col-3" style="background-color: burlywood"></td>
</tr>
</table>
</section>
<script>
function changeGreen() {
const title = document.querySelector(".title");
title.style.color = "green";
}
function changeViolet() {
const title = document.querySelector(".title");
title.style.color = "violet";
}
function showDate() {
const btn = document.querySelector(".buttonDate");
const date = new Date();
btn.innerHTML = `${date.toLocaleString("en-US", {
weekday: "short",
})} ${date.toLocaleString("en-US", {
month: "short",
})} ${date.getDay()} ${date.getFullYear()}`;
}
function divide() {
alert(
document.querySelector("#num1").value /
document.querySelector("#num2").value
);
}
function minus() {
alert(document.querySelector("#num").value - 17);
}
function calculate() {
const x = document.querySelector("#valueX").value;
alert(
Math.cos(3 + 3 * Math.PI) * Math.sin(2 * x - (5 * Math.PI) / 2) +
2 *
Math.cos((5 * Math.PI) / 2 - x) *
Math.tan(x - (3 * Math.PI) / 2)
);
}
function dayCount() {
var monthnumber = document.querySelector("#dayCount").value;
if (monthnumber > 0 && monthnumber < 13) {
if (monthnumber == 2) alert("28 or 29");
else if (
(monthnumber % 2 == 1 && monthnumber <= 7) ||
(monthnumber % 2 == 0 && monthnumber > 7)
) {
alert("31");
} else {
alert("30");
}
} else {
alert("Число месяца должно быть больше 1 и меньше 12");
}
}
function dayCountSwitch() {
var monthnumber = document.querySelector("#dayCount2");
switch (monthnumber.value) {
case "1":
alert("31");
break;
case "2":
alert("28 или 29");
break;
case "3":
alert("31");
break;
case "4":
alert("30");
break;
case "5":
alert("31");
break;
case "6":
alert("30");
break;
case "7":
alert("31");
break;
case "8":
alert("31");
break;
case "9":
alert("30");
break;
case "10":
alert("31");
break;
case "11":
alert("30");
break;
case "12":
alert("31");
break;
default:
break;
}
}
{
const table = document.querySelector("#table");
const row = document.querySelector("#row");
const col1 = document.querySelector("#col-1");
const col2 = document.querySelector("#col-2");
const col3 = document.querySelector("#col-3");
table.onmouseover = table.onmouseout = handler;
function handler(e) {
let color;
if (e.target == col1 && e.type == "mouseover") {
document.body.style.background = window
.getComputedStyle(col1, null)
.getPropertyValue("background-color");
}
if (e.target == col1 && e.type == "mouseout") {
document.body.style.background = "";
}
if (e.target == col2 && e.type == "mouseover") {
document.body.style.background = window
.getComputedStyle(col2, null)
.getPropertyValue("background-color");
}
if (e.target == col2 && e.type == "mouseout") {
document.body.style.background = "";
}
if (e.target == col3 && e.type == "mouseover") {
document.body.style.background = window
.getComputedStyle(col3, null)
.getPropertyValue("background-color");
}
if (e.target == col3 && e.type == "mouseout") {
document.body.style.background = "";
}
}
}
</script>
</body>
</html>