Помогите разобраться с селекторами
приветствую всех! есть одно текстовое поле и одна кнопка, нужно чтобы при заполнении тектового поля кнопка появлялась(изначально она скрыта). Теперь хочу, чтобы при заполнении только двух текстовых полей эта кнопка появлялась, но не могу понять как. Вот код с одним текстовым полем :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<textarea id="t1"></textarea>
<button style="display: none;"></button>
<script type="text/javascript">
button=document.querySelector("button");
textarea=document.querySelector("textarea");
textarea.oninput=function(){
if(this.value==="") return button.style.display="none"
button.style.display="block"
}
</script>
</body>
</html>
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
button {
width: 100px;
height: 20px;
display: none;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<textarea id="t1"></textarea>
<textarea id="t2"></textarea>
<button></button>
<script type="text/javascript">
(function(){
button=document.querySelector("button");
textarea=document.querySelectorAll("textarea");
for (var i=0; i<textarea.length; i++) {
textarea[i].oninput=toogle;
};
function toogle(){
var empty=(textarea[0].value==='')||(textarea[1].value==='');
button.style.display=(empty)? "none": "block";
}
})();
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 01:19. |