<h1 id= "count" > 0</h1>
<button onclick= "increase()" > Increase</button>
<button onclick= "decrease()" > Decrease</button>
<button onclick= "reset()" > Reset</button>
<script>
function increase () {
const element = document . getElementById ( " count " );
let value = Number ( element . innerText );
element . innerText = value + 1 ;
}
function decrease () {
const element = document . getElementById ( " count " );
let value = Number ( element . innerText );
element . innerText = value - 1 ;
}
function reset () {
const element = document . getElementById ( " count " );
element . innerText = 0 ;
}
</script>
Enter fullscreen mode
Exit fullscreen mode
<!DOCTYPE html>
<html>
<body>
<h2> Live Character Counter</h2>
<textarea id= "text" rows= "5" cols= "30" onkeyup= "countChar()" ></textarea>
<p> Characters: <span id= "count" > 0</span></p>
<script>
function countChar () {
const text = document . getElementById ( " text " );
const count = document . getElementById ( " count " );
count . innerText = text . value . length ;
}
</script>
</body>
</html>
Enter fullscreen mode
Exit fullscreen mode
<!DOCTYPE html>
<html>
<body>
<input type= "password" id= "password" >
<button id= "btn" onclick= "showHide()" > Show</button>
<script>
function showHide () {
const password = document . getElementById ( " password " );
const btn = document . getElementById ( " btn " );
if ( password . type == " password " ) {
password . type = " text " ;
btn . innerText = " Hide " ;
} else {
password . type = " password " ;
btn . innerText = " Show " ;
}
}
</script>
</body>
</html>
Enter fullscreen mode
Exit fullscreen mode
Top comments (0)