Is there an other way to link to an element on the same page without using anchor URLs?
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Alternative to anchor URL</title>
</head>
<body>
<input type="button" value="Go there »" />
<div style="height:1280px;"></div>
<div id="goHere" style="width:360px;height:240px;background-color:#61b2cc"></div>
</body>
</html>
There is! Look at the code below:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Alternative to anchor URL</title>
<script type="text/javascript">
function scrollWindow() {
{
var top = document.getElementById('goHere').offsetTop;
window.scrollTo(0, top);
}
}
scrollWindow();
</script>
</head>
<body>
<input type="button" onclick="scrollWindow()" value="Go there »" />
<div style="height:1280px;"></div>
<div id="goHere" style="width:360px;height:240px;background-color:#61b2cc"></div>
</body>
</html>
With jQuery:
$("button").click(function(){
window.scrollTo($("#goHere").offset().top);
});
Related
My issue is that when I click on the button, the div container wouldn't fade in. Can anyone help?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="stlye1.css">
<title>Document</title>
<script src="myscripts.js"></script>
</head>
<script>
$("#header1").click(function () {
$("#section_one").fadeIn('fast');
});
</script>
<body>
<button type="button" id="header1">div 1</button>
<div id="section_one" class="parallax1">
<div>
<h1>text</h1>
</div>
</div>
</body>
</html>
Your problem is that you don't tell the div to hide with the style="display: none".
There is you code back
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="stlye1.css" />
<title>Document</title>
<script src="myscripts.js"></script>
</head>
<body>
<button type="button" id="btn1">div 1</button>
<div id="div1" class="parallax1" style="display: none">
<div>
<h1>text</h1>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("#div1").fadeIn("fast");
});
});
</script>
Question:
why I am not seeing the image appear when I click on the checkbox?
Problem:
I get no errors with Inspect Tools. Does anyone see something I am missing? Thank you.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#your_img {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#show_image').on("click", function() {
if ($('#your_img').is(':hidden')) {
$('#your_img').show();
} else {
$('#your_img').hide();
}
});
</script>
</head>
<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height:
485px;width:71px">
</div>
<body>
</body>
</html>
The problem is your click event is getting registered before the checkbox is rendered in dom. Your click event should get registered after the checkbox is rendered in dom.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#your_img {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</head>
<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height:
485px;width:71px">
</div>
<body>
<script type="text/javascript">
$('#show_image').on("click", function() {
if ($('#your_img').is(':hidden')) {
$('#your_img').show();
} else {
$('#your_img').hide();
}
});
</script>
</body>
</html>
I see a clear mistake with the body tag! You opened it after all the div and stuff.
Here's the fixed code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#your_img {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#show_image').on("click", function() {
if ($('#your_img').is(':hidden')) {
$('#your_img').show();
} else {
$('#your_img').hide();
}
});
</script>
</head>
<body>
<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height:
485px;width:71px">
</div>
</body>
</html>
Please add your div elements and logic code in the body section. All the logic code is placed before the ending of the body section. The last script section containing your logic compiles after the dom is ready.
You can use the below code. Hope it helps!!!
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#your_img {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</head>
<body>
<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height:
485px;width:71px">
</div>
<script type="text/javascript">
$('#show_image').on("click", function() {
if ($('#your_img').is(':hidden')) {
$('#your_img').show();
} else {
$('#your_img').hide();
}
});
</script>
</body>
</html>
i have this problem, I would like to load a text inside a div with .innerHTML but after the event click the text inside the div diseappers:
index.html
<!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>Anagrafica</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h1>My Document</h1>
<input type="submit" value="submit" id="submit">
<div id="myDiv"></div>
<script src="js/app.js"></script>
</body>
</html>
app.js
window.addEventListener('load',function(){
document.getElementById('submit').addEventListener('click',function({
document.getElementById('myDiv').innerHTML= 'hello';
});
You have syntax error , )} missing .
addEventListener('click', function({
Looks like callback but you need just function(){} to attach.
window.addEventListener('load',function(){
document.getElementById('submit').addEventListener('click', function(){
document.getElementById('myDiv').innerHTML= 'hello';
}, false);
}, false);
<input type="submit" value="submit" id="submit">
<br/>
<br/>
<div id="myDiv" style="background-color:black;color:lime;width:300px" > ... </div>
On html
<button type='submit'></button>
On js
var Button = document.querySelector("button");
Button.addEventListener("click", onClickButton, false);
function onClickButton(){
// to do something here
}
How can I pass argument to function redirect in JavaScript
Here is my code:
<script type="text/javascript">
<!--
function redirectlink(text){
window.location = "index.php?keyName="+ text;
}
//-->
</script>
<form>
<button type="button" id="butt_1" onclick="redirectlink(KEY_POWER)"> 1 </button>
Thank you in advance.
This can be done either by using getElementById and addEventListener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo">Click</button>
<script type="text/javascript">
document.getElementById("foo").addEventListener("click", function(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
})
</script>
</body>
</html>
either onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo" onclick="action()">Click</button>
<script type="text/javascript">
function action(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
}
</script>
</body>
</html>
Using onclick is deprecated.
With just only JavaScript (without jQuery / Angular etc.) you can use addEventListener on click event.
for example:
var btn = document.getElementById('butt_1');
btn.addEventListener('click', function(e) {
// your code
});
In this function you can for example get value/txt from this button element and something else which you want.
I created a simple app in PhyCharm and in my static folder i have a .js file and in my templates folder, a index.html file.
In my .js file, i have this:
console.log('loaded script.js');
$(document).ready(function () {
$("#submit").on('click', function (event) {
handleClick();
});
});
function handleClick() {
alert("We got here");
$.ajax('/', {
type: 'GET',
data: {
fmt: 'json'
}
});
}
and this is the index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="static/script.js"></script>
</head>
<body>
<input type="button" id="submit" value="Get It">
</body>
</html>
when the app loads, "loaded script.js" shows in the console, but the button click doesn't work. Am not sure why as the code looks fine to me.
Everyone has given you the answer. This one uses Google's CDN.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="static/script.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
</head>
<body>
<input type="button" id="submit" value="Get It">
</body>
</html>
Refer to http://jsfiddle.net/hpX3e/ for an example.
You need to load your jQuery File
Update You shouldn't be loading your JavaScript in your <head> tag. You should be loading it at the bottom of your <body> tag.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="submit" value="Get It">
<script src="static/jQuery.js"></script>
<script src="static/script.js"></script>
</body>
</html>
Instead of cluttering up your .js file with...
$(document).ready(function () {
$("#submit").on('click', function (event) {
handleClick();
});
});
Why not simplify the entire thing by simply calling the function in the HTML.
<input type="button" id="submit" onclick="handleClick()" value="Get it">