Member Avatar for kaushik259106

In the following code i am able to change the case of my entered text with each entry of letters.. can you tell how do i dynamically display its length as well without using ajex..

<html>

<head>

<script type="text/javascript">
function length(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</head>


<body>

Enter password: <input type="text" id="fname" onkeyup="length(this.id)">
<br>
length of the password is :
</body>
</html>
  • 2 Contributors
  • 5 Replies
  • 109 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by kaushik259106
Member Avatar for ~s.o.s~

Something like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>sample page</title>
<script type="text/javascript">
//<![CDATA[
function myLength()
{
    var element = document.getElementById('fname');
    element.value = element.value.toUpperCase();
    document.getElementById('len').innerHTML = element.value.length;
}
//]]>
</script>
</head>
<body>
<form id="frm">
<label>Enter password:</label><input type="text" id="fname" onkeyup="myLength();">
<br />
<div>length of the password is: <span id="len"></span></div>
</form>
</body>
</html>
Member Avatar for kaushik259106

ya.. thanx..lots of thanx.. thats what i want

Member Avatar for kaushik259106

I was trying to change my font colour dynamically.. got a bit messed up...

What changes should i have done?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>sample page</title>
<script type="text/javascript">
//<![CDATA[
function myLength()
{
    var str = document.getElementById('streng');
    var strColor;
    var element = document.getElementById('fname');
    leng = element.value.length;
    document.getElementById('len').innerHTML = leng;
    if(leng<=6)
      {
      str = "Small Word";
      strColor= "red";
      
      }
    else
      {
      str = "Big Word";
      strColor= "green";
      }
    
    document.getElementById('streng').innerHTML = str;
    
   //  str.innerHTML = "<span style='color: " + strColor + ";'>" + str + "</span>";
    
}
//]]>
</script>
</head>
<body>
<form id="frm">
<label>Enter password:</label><input type="text" id="fname" onkeyup="myLength();">
<br />
<div>length of the password is: <span id="len"></span></div>
<br>
<div>The password is : <span id="streng" style="font-size: 20px;"></span></div> 
</form>
</body>
</html>

and when i search in google how do i search these type of things.. a whole day search only returned me normal js but no graphical things.. please provide some good links if you can!

Member Avatar for ~s.o.s~

Use the 'style' property of HTML elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>sample page</title>
<script type="text/javascript">
//<![CDATA[
function myLength()
{
    var str, strColor;
    var display = document.getElementById('streng');
    var element = document.getElementById('fname');
    var leng = element.value.length;
    document.getElementById('len').innerHTML = leng;
    if(leng <= 3)
    {
        str = "Weak";
        strColor= "red";
    }
    else if(leng <= 6) 
    {
        str = "Decent";
        strColor = "orange";
    }
    else
    {
        str = "Strong";
        strColor= "green";
    }
    display.style.color = strColor;
    display.innerHTML = str;
}
//]]>
</script>
</head>
<body>
<form id="frm">
<label>Enter password:</label><input type="password" id="fname" onkeyup="myLength();" /><br /><br />
<div>length of the password is: <span id="len"></span></div><br />
<div>The password is : <span id="streng" style="font-size: 20px;"></span></div>
</form>
</body>
</html>

Also read some good tutorials so that you don't have basic queries. Start here.

Member Avatar for kaushik259106

Bro i was able to solve it.. just changed

else
      {
      str = "Big Word";
      strColor= "green";
      }
    
   // document.getElementById('streng').innerHTML = str;
    document.getElementById('streng').innerHTML = "<span style='color: " + strColor + ";'>" + str + "</span>";
    
}

</script>
</head>
<body>
<form id="frm">
<label>Enter password:</label><input type="text" id="fname" onkeyup="myLength();">
<br />
<div>length of the password is: <span id="len"></span></div>
<br>
<div style="width: 100px;"> 
<span id="streng" style="font-size: 20px;"></span>
<!-- <div>The password is : <span id="streng" style="font-size: 20px;"></span></div> -->
</form>
</body>
</html>

Can you give some helpfull links related to all graphical things of js...Thanx again

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.