what the reason to function oninput in js is not work? - javascript

there are practical video uploaded by someone and i do step by step what do you write in video ( i mean codes ) but nothing is !
the used language ( html and js )
var $count = document.getElementById("count"),
$textarea = document.getElementById("text"),
$maxlength = $textarea.getAttribute("maxlength");
$maxlength.oninput = function () {
$count.innerHTML = $maxlength - this.value.length;
};
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="cal.css">
<title>cal</title>
</head>
<body>
<form action="">
<textarea name="text" id="text" cols="30" rows="10" maxlength="100"></textarea>
<span id="count">100</span>
</form>
<script src="cal.js"></script>
</body>
</html>

Not $maxlength, use $textarea to listen oninput event.
var $count = document.getElementById("count"),
$textarea = document.getElementById("text"),
$maxlength = $textarea.getAttribute("maxlength");
$textarea.oninput = function () {
$count.innerHTML = $maxlength - this.value.length;
};
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="cal.css">
<title>cal</title>
</head>
<body>
<form action="">
<textarea name="text" id="text" cols="30" rows="10" maxlength="100"></textarea>
<span id="count">100</span>
</form>
<script src="cal.js"></script>
</body>
</html>

Related

How can I print users input name as he enters in the input box

function.getElementById("a")
{
var input= document.getElementById("a")
console.log("input")
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="index.js">
</script>
<div class="a">
<input id="a" placeholder="enter here..." >
</div>
</body>
</html>
I want to print the name of user as same he enters in the input box.
You can try something like this. You need to add an event listener to a variable which represents the input element. The event it listens for is the input event. When any input happens the function fires which logs the value of the input element to the console.
const input= document.querySelector("#a")
input.addEventListener('input', function(event){
console.log(event.target.value);
});
<input id="a" placeholder="enter here..." >
use event keyup
addEventListener('keyup',test)
function test(){
let x = document.getElementById('a').value
console.log(x)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="index.js">
</script>
<div class="a">
<input id="a" placeholder="enter here..." >
</div>
</body>
</html>

How to remove the border of fields from the form using a button

How to do that after sending the form and display in places where there were form fields the entered data that come from these form fields and delete. I wanted to use preventdefault ()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form novalidate>
<label for="imie">Name</label>
<INPUT type="text" id="firstName"><BR>
<div id="first-name-err"></div>
<INPUT type="submit" value="Send">
</form>
<script>
var firstName= document.getElementById("firstName");
var firstNameValidation=function(){
firstNameValue=firstName.value.trim();
validFirstName=/^[A-Z]{1}[a-z]{2,}/mg;
firstNameErr=document.getElementById('first-name-err');
if(firstNameValue=="")
{
}else if(!validFirstName.test(firstNameValue)){
firstNameErr.innerHTML="...h";
}else{
firstNameErr.innerHTML="";
return true;
}
}
firstName.oninput=function(){
firstNameValidation();
}
</script>
</body>
</html>

Javascript textarea charcoutner isn't working

hello my code isn't working idk why i tried to make textarea char counter that only shows the chachter not maxiumum
here is the java script
let text = document.querySelector('#text');
let number = text.value.length;
let count = document.querySelector('#count');
text.addEventListener("input", updateCount());
function updateCount(){
count.value + number
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>
In your text.addEventListener("input", updateCount()); assignment you did not assign the function updateCount to the input event of the selected element but instead you executed it once and assigned the non-existent return value of the function call to the event.
And in the function itself you will need to put (=assign) the calculated count somewhere too:
let text = document.querySelector('#text');
let count = document.querySelector('#count');
text.addEventListener("input", updateCount);
function updateCount(ev){
count.textContent=ev.target.value.length;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>
ev.target.value.length gets the current length of the <textarea> element and count.textContent= assigns it to the target <span>.
A better way is by subscribing to the keyup event and getting the value from the scope using this keyword
function characterCount() {
document.getElementById('text').onkeyup = function () {
document.getElementById('count').innerHTML = this.value.length;
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz" onchange="characterCount()"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
</body>
</html>

having trouble grabbing html input value using javascript

I have an html file and I want to grab the text that is entered in the input field using javascript. I have tried a few different ways but nothing seems to be working properly. Here is the code that I have right now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<input type="text" id="searchingterm">
<form>
<input type="text" id="search">
</form>
<script>
$(document).ready(function(){
var searched = document.getElementById("search").value;
console.log(searched)
})
</script>
</body>
</html>
i also tried using jquery but that didnt do anything either.
basically, the problem is that you are not assigning anything to that input and also you dont have a function to trigger the search.
your code was right, you just needed to change it a little bit.
function search() {
var searched = document.getElementById("search").value;
console.log(searched)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<input type="text" id="search">
</form>
<button onclick="search()"> search</button>
</body>
</html>
here having the script on the body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<input type="text" id="search">
</form>
<button onclick="search()"> search</button>
<script>
function search() {
var searched = document.getElementById("search").value;
console.log(searched)
}
</script>
</body>
</html>

Make a Javascript/JQuery Slidedown menu start hidden instead of showing

I was wondering if you guys could help me with my Slidedown menu. It starts with the content showing and I want to make it start hidden so when you click the button it will show and it wont start showing the content.
Heres my code:
var test = $('#test'),
toggle = $('#toggle');
toggle.click(function() {
test.slideToggle(1000, function() {
});
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>PASSWORD PROTECTION</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type='text/javascript' src='main.js'></script>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="style.css">
</head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Down Menu Click</title>
</head>
<body></body>
<button id="toggle">Login</button></p>
<div id="test">
<div class="slideTogglebox">
<h2>Login</h2>
<form id="form" onsubmit="return false;">
<input type="password" id="values" />
<input type="submit" onclick="lg();" />
<input type="reset" onclick="location.reload();" />
</div>
<nil></nil>
</body>
</html>
</script>
</body>
Try adding
display:none;
to #test in your style.css.
Alternatively, you could add it in the tag as well with:
<div id="test" style="display:none">
see below:
var test = $('#test'),
toggle = $('#toggle');
toggle.click(function() {
test.slideToggle(1000, function() {
});
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>PASSWORD PROTECTION</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type='text/javascript' src='main.js'></script>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="style.css">
</head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Down Menu Click</title>
</head>
<body></body>
<button id="toggle">Login</button></p>
<div id="test" style="display:none">
<div class="slideTogglebox" >
<h2>Login</h2>
<form id="form" onsubmit="return false;">
<input type="password" id="values" />
<input type="submit" onclick="lg();" />
<input type="reset" onclick="location.reload();" />
</div>
<nil></nil>
</body>
</html>
</script>
</body>

Categories

Resources