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>
Related
I'm trying to follow a video, but the button isn't working. I cannot press the button. How do I fix my code?
My code
function increment() {
console.log("added");
}
<!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>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Amount:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn" onclick="increment()">INCREMENT</button>
<script src="index.js"></script>
</body>
</html>
I'm not certain where to go from here
Your code seems running fine, I just added the increment function. You'll see the button work. :)
function increment() {
document.getElementById("count-el").innerHTML = eval(document.getElementById("count-el").innerHTML) + 1;
}
<!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>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Amount:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn" onclick="increment()">INCREMENT</button>
<script src="index.js"></script>
</body>
</html>
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>
I am a beginner in javascript , now I'm learning a BOM but when I used method moveTo()
it can't work I need moveto(0,200) childPage after open by button , please help me and explain me where is the problem in it ?
parent.html
<!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>Bom</title>
</head>
<body>
<input type="button" value="openChild" onclick="openChild()" />
<input type="button" value="moveChild" onclick="moveToo()" />
<script src="js/parent.js"></script>
</body>
</html>
parent.js
function openChild() {
res = open("./child.html", "", "width=200 , height=200");
}
function moveToo() {
moveTo(0, 200);
}
child.html
<!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" />
<style>
body {
background: yellow;
}
h1 {
text-align: center;
}
</style>
<title>child</title>
</head>
<body>
<h1>welcome in child</h1>
</body>
</html>
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>
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>