2014-03-14 2 views
0

텍스트 상자의 텍스트 길이에 따라 텍스트를 표시하고 숨기려고합니다. 나는 다음 코드를 시도했다. 그러나 그것은 작동하지 않습니다. 도와주세요.자바 스크립트 가시성은 조건에 따라 숨김

<!DOCTYPE html> 
<html> 
<head> 
    <script> 
     function myFunction() 
     { 
      var x=document.getElementById("fname"); 
      if(x.length<1) 
       document.getElementById("lname").style.visibility = 'visible'; 
      else 
       document.getElementById("lname").style.visibility = 'hidden'; 

     } 
    </script> 
</head> 
<body> 

    Enter your name: <input type="text" id="fname" onchange="myFunction()"> 

    <div id="lname" style="visibility:hidden">hey im printing</div> 

</body> 
</html> 
+0

사용. –

+0

당신이 요소 수와 값 길이가 아닌'if (x.length <1)'를 확인하고 있다고 생각합니다. – Justinas

+0

당신의 제안에 감사드립니다! – Sakthi

답변

0

당신은 입력 길이를 확인해야합니다

var x=document.getElementById("fname"); 
if(x.value.length<1) 
0

사용이

var x=document.getElementById("fname").value; 

var x에 값을 할당있다. 이

function myFunction() 
{ 
    var x=document.getElementById("fname").value; 
    if(x.length>=1) 
    { 
     document.getElementById("lname").style.visibility="visible"; 
    } 
    else 
    document.getElementById("lname").style.visibility = 'hidden'; 
} 

DEMO

+0

divbox 태그가 화면에 나타나지 않습니다. 텍스트 상자에 아무 것도 입력하지 않으면 onchange() 메소드가 호출되지 않기 때문입니다. myFunction() 메서드는 실행되지 않습니다. 텍스트 상자에 somehhing을 입력하는 경우에만 myFunction() 메서드가 나타납니다. – Arjit

0

는보십시오.

<input type="text" id="fname" onkeyup="myFunction()"> 
<div id="lname" style="visibility:hidden">hey im printing</div> 

function myFunction() 
{ 

     var x=document.getElementById("fname"); 
     if(x.value.length>0){ 
      document.getElementById("lname").style.visibility = 'visible'; 
     }else{ 
      document.getElementById("lname").style.visibility = 'hidden'; 
     } 

} 

Working DEMO

0

확인이를 당신 대신 당신이 FNAME 요소가 현재 DOM이나하지 존재 여부를 확인하는, 길이를 확인하지 않는 jquery

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.min.js" 
     type="text/javascript"></script> 

<script> 
function myFunction() 
{ 

// var x=document.getElementById("fname").val(); 
var x=$("#fname").val(); 
    alert(x.length) 
if(x.length < 1) { 
    alert('if'); 
     $("#lname").css("display", "block"); 
} 
//document.getElementById("lname").style.visibility = 'visible'; 
else { 
    $("#lname").css("display", "none"); 
} 

} 
</script> 
</head> 
<body> 

Enter your name: <input type="text" id="fname" onchange="myFunction()"> 

<div id="lname" style="display:none">hey im printing</div> 

</body> 
</html>