Не добавляется граница для 2 таблицы с помощью JS
Хочу выделить таблицу границей, при нажатии кнопки. Для первой кнопки всё получилось, но когда нажимаю на 2 кнопку, граница у 2 таблицы не появляется. В чём у меня ошибка? Помогите пожалуйста
<html>
<head>
<title>Taday</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
margin: 0;
background-image: url("fon.jpg");
background-attachment: fixed; /* Фиксируем фон веб-страницы */
background-size: cover; /*Запрещаем появляться куче тиаких же изображений */
}
.privet {
position:relative;
text-align: center;
color: white;
text-shadow: black 1px 1px 10px;
width: 100%;
font-size: 30px;
margin-bottom: 25px;
font-family: 'Pangolin', cursive;
}
.privet::after {
content:"";
position:absolute;
bottom:-5px;
left:50.47%;
margin-left: -18%;
width:35%;
height:2px;
background:#ffd63a
}
.tabl{
max-width: 250px;
display: flex;
margin:auto;
color: #fff;
font-weight: 900;
font-size: 33px;
justify-content: center;
font-family: 'Pangolin', cursive;
border-collapse: collapse;
padding: 0px;
margin-bottom: 50px;
}
.tabl2{
max-width: 250px;
display: flex;
margin:auto;
color: #fff;
font-weight: 900;
font-size: 33px;
justify-content: center;
font-family: 'Pangolin', cursive;
border-collapse: collapse;
padding: 0px;
}
.WOD{
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 30px;
}
.WOD1{
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 30px;
}
.Hours,.Minutes,.Button{
margin-left: 20px;
}
::-webkit-input-placeholder {
color: #fff;
}
input {
background-color: #b73516;
color: white;
padding: 16px 32px;
font-size: 20px;
border-radius: 5px;
border: #ffd63a 2px;
outline:none;
}
/* input[type=text] {
-webkit-transition: 0.5s;
transition: 0.5s;
*/
input[type=text]:focus, input[type=buttom]:focus{
border: 1px solid #ffd63a;
}
input[type=button]{
cursor: pointer;
}
.poka{
text-align: center;
color: white;
font-size: 27px;
margin-top: 5px;
margin-bottom: 10px;
font-family: 'Pangolin', cursive;
text-shadow: black 1px 1px 10px;
}
</style>
<body>
<div class = "privet">...Выберите время, в которое вы хотите лечь спать...</div>
<div class = "WOD">
<div class = "Hours"><input id="a" name="a" type="text" size="3" value="" placeholder="Часы"></div>
<div class = "Minutes"><input id="b" name="b" type="text" size="3" value="" placeholder="Минуты"></div>
<div class = "Button"><input type="button" size="3" value="Расcчитать" onclick="addition();"></div>
</div>
<div class= "poka" id=7>Вам стоит проснуться в это время:</div>
<div class = "tabl">
<table>
<tr>
<td><div id=1></div></td>
<td><div id=2></div></td>
</tr>
<tr>
<td><div id=3></div></td>
<td><div id=4></div></td>
</tr>
<tr>
<td><div id=5></div></td>
<td><div id=6></div></td>
</tr>
</table>
</div>
</div>
<div class = "privet">...Выберите время, в которое вы хотите проснуться...</div>
<div class = "WOD1">
<div class = "Hours"><input id="chasi" name="a" type="text" size="3" value="" placeholder="Часы"></div>
<div class = "Minutes"><input id="minuta" name="b" type="text" size="3" value="" placeholder="Минуты"></div>
<div class = "Button"><input type="button" size="3" value="Расcчитать" onclick="addition1();"></div>
</div>
</div>
<div class= "poka" id=17>Вам стоит лечь в это время:</div>
<div class = "tabl2">
<table>
<tr>
<td><div id=11></div></td>
<td><div id=12></div></td>
</tr>
<tr>
<td><div id=13></div></td>
<td><div id=14></div></td>
</tr>
<tr>
<td><div id=15></div></td>
<td><div id=16></div></td>
</tr>
</table>
</div>
</div>
</body>
<script>
function addition()
{
var a = parseInt(document.getElementById('a').value);
var b = parseInt(document.getElementById('b').value);
let tab = document.querySelector(".tabl");
if (isNaN(a)==true) a=0;
if (isNaN(b)==true) b=0;
if (a>23 || b>59)
{
document.getElementById(7).innerHTML= "Неверно введено время";
document.getElementById(1).innerHTML= "";
document.getElementById(2).innerHTML= "";
document.getElementById(3).innerHTML= "";
document.getElementById(4).innerHTML= "";
document.getElementById(5).innerHTML= "";
document.getElementById(6).innerHTML= "";
tab.style.border = "";
}
else
{
document.getElementById(7).innerHTML= "Вам стоит встать в это время:";
tab.style.border = "1px solid grey";
for(let u=0;u<6;u++)
{
b=b+30;
a=a+1;
if(b>59)
{
b=b-60;
a= a+1;
}
if (a>23)
{
a=a-24;
}
if(b<10 && a<10)/* Делаем красивый вывод минут и часоvni (что бы выводило 06:09 а не 6:9)*/
{
document.getElementById(1+u).innerHTML= "0"+a+ ":0" +b + "<br/>";
}
else
if(b<10)
{
document.getElementById(1+u).innerHTML= a+ ":0" +b + "<br/>";
}
else
if(a<10)
{
document.getElementById(1+u).innerHTML= "0"+a+ ":" +b + "<br/>";
}
else
{
document.getElementById(1+u).innerHTML= a+ ":" +b + "<br/>";
}
}
}
}
function addition1() // Во сколько ложиться спать
{
var chasi = parseInt(document.getElementById('chasi').value);
var minuta = parseInt(document.getElementById('minuta').value);
let tab2 = document.querySelector(".tabl2");
if (isNaN(chasi)==true) chasi=0;
if (isNaN(minuta)==true) minuta=0;
if (chasi>23 || minuta>59)
{
document.getElementById(17).innerHTML= "Неверно введено время";
document.getElementById(11).innerHTML= "";
document.getElementById(12).innerHTML= "";
document.getElementById(13).innerHTML= "";
document.getElementById(14).innerHTML= "";
document.getElementById(15).innerHTML= "";
document.getElementById(16).innerHTML= "";
tab2.style.border = "";
}
else
{
document.getElementById(17).innerHTML= "Вам стоит лечь в это время:";
tab2.style.border = "1px solid grey;";
for(let u=0;u<6;u++)
{
minuta=minuta-30;
chasi=chasi-1;
if(minuta<0)
{
minuta=minuta+60;
chasi=chasi-1;
}
if (chasi<0)
{
chasi=chasi+24;
}
if(minuta<10 && chasi<10)// Делаем красивый вывод минут и часо (что бы выводило 06:09 а не 6:9)
{
document.getElementById(11+u).innerHTML= "0"+chasi+ ":0" +minuta+ "<br/>";
}
else
if(minuta<10)
{
document.getElementById(11+u).innerHTML= chasi+ ":0" +minuta + "<br/>";
}
else
if(chasi<10)
{
document.getElementById(11+u).innerHTML= "0"+chasi+ ":" +minuta + "<br/>";
}
else
{
document.getElementById(11+u).innerHTML= chasi+ ":" +minuta + "<br/>";
}
}
}
}
</script>
</html>