Здравствуйте! Проблема вот в чем: мне нужно, чтобы при нажатии на чекбокс исчезало поле для ввода, но если я задаю стили через внешний файл стилей, то для того, чтобы оно исчезло, мне нужно нажать 2 раза, если же указать стили в html через style="", то все работает как надо. Вот пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="1.css">
</head>
<body>
<div>
<input type="checkbox" id="check">
<label for="check">OK</label>
<input type="text" id="txt" style="display: none">
</div>
<script type="text/javascript" src="1.js"></script>
</body>
</html>
Файл 1.js:
var gg = document.getElementById("check");
gg.addEventListener("click", click);
function click(){
var dd1 = document.getElementById("txt").style.display;
if(dd1=="none"){
document.getElementById("txt").style.display="block";
}else{
document.getElementById("txt").style.display="none";
}
}
Сверху все работает как надо, но если убрать style="display: none" из html, то работать будет криво:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="1.css">
</head>
<body>
<div>
<input type="checkbox" id="check">
<label for="check">OK</label>
<input type="text" id="txt">
</div>
<script type="text/javascript" src="1.js"></script>
</body>
</html>
Файл 1.js:
var gg = document.getElementById("check");
gg.addEventListener("click", click);
function click(){
var dd1 = document.getElementById("txt").style.display;
if(dd1=="none"){
document.getElementById("txt").style.display="block";
}else{
document.getElementById("txt").style.display="none";
}
}
Файл 1.css:
#txt{
display: none;
}
Как это исправить, если писать css код в html я не хочу?