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>
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>
How to append tag inside div id=demo? I use nodejs.
blog.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>Document</title>
</head>
<body>
<div id="demo"></div>
</body>
</html>
server.js
app.get(":/blog", (req,res) => {
res.sendfile("blog.html");
}
$(function(){
$('#alias').keyup(function(){
$('#youtuber').html($('#alias').val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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="width=device-width">
<title>Julius extension</title>
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
<style>
body{
width: 300px;
}
</style>
</head>
<body>
<h3>Find your YouTuber: <span id="youtuber"></span> </h3>
<input id="alias" placeholder="Search your youtuber"/>
</body>
</html>
I am trying to code a simple chrome extension. Right now I want that everything I write in the search bar of my template gets displayed above, after the "Find your YouTuber:" text.
However, for some reason that is not the case, I get the error message: popup.js:1 (anonymous function), whilst running the extension.
popuph.html :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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="width=device-width">
<title>Julius extension</title>
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
<style>
body{
width: 300px;
}
</style>
</head>
<body>
<h3>Find your YouTuber: <span id="youtuber"></span> </h3>
<input id="alias" placeholder="Search your youtuber"/>
</body>
</html>
popup.js:
$(function () {
$('#alias').keyup(function () {
$('#youtuber').html($('#alias').val());
});
});
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>
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>