Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
When I get on one of my pages I want an lightbox to be loaded. I cant figure out how to make it happen.
Part of the jQuery:
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jss/jquery.js"></script>
<script src='http://fliphtml5.com/plugin/LightBox/js/fliphtml5-light-box-api-min.js'></script>
<script>
$(document).ready(function() {
$(".foo").trigger('click');
});
</script>
</head>
The image/link that should be clicked automaticly:
<img class="foo" src="imgs/logo-growpact.png"data-rel='fh5-light-box-demo' data-href='http://online.fliphtml5.com/classified' data-width='1280' data-height='720' data-title='Rootcage'>
First Just remove your
<script type="text/javascript" src="jss/jquery.js"></script>
And try this :
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src='http://fliphtml5.com/plugin/LightBox/js/fliphtml5-light-box-api-min.js'></script>
</head>
<body>
<script>
jQuery(function(){
jQuery('.foo').click();
});
</script>
<img class="foo" src="imgs/logo-growpact.png" data-rel='fh5-light-box-demo' data-href='http://online.fliphtml5.com/classified' data-width='1280' data-height='720' data-title='Rootcage'>
</body>
</html>
Here is the Fiddle: CHECK THIS
UPDATED
<script>
jQuery(function(){
setTimeout(function(){
jQuery('.foo').click();
},400);
});
</script>
FIDDLE
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I know I'm a beginner at this, but I really need to learn the rules. I'm trying to make a simple example of javascript. Its a box with three buttons, but for some reason only one of them works. They do have different ID types, so there must be another rule I don't know.
<!DOCTYPE html>
<html>
<head>
<title>Javascript box</title>
</head>
<body>
<p>Press buttons to change the box</p>
<div id="box" style="height:100px; width:100px; background-color: limegreen; margin:50px"></div>
<br>
<button id="less">less</button>
<button id="more">more</button>
<button id="none">Reset</button>
<script type="text/javascript">
document.getElementById("less").addEventListener("click", function(){
document.getElementById("box").style.height = "25px";
});
document.getElementByID("more").addEventListener("click", function(){
document.getElementById("box").style.height = "150px";
});
document.getElementById("none").addEventListener("click", function(){
document.getElementById("box").style.height = "100px";
});
</script>
</body>
</html>
For the second addEventListener, there's a typo.
In document.getElementByID, the D should not be capitalised.
A good way to debug these issues is to look at the console in developer tools.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
<!DOCTYPE html>
<html>
<head>
<script>
let counter= 0;
function count() {
counter++;
document.querySelector('#counter').innerHTML= counter;
}
</script>
<title>My Webpage</title>
</head>
<body>
<h1 id="counter">0</h1>
<button onlclick="count()">Click Here!</button>
</body>
</html>
when i am running it on internet explorer and also on an online IDE for html the page displays 0 and click here but when i click on the button the page remains the same and the 0 not changes to 1.
Please help what changes can i make
You have a typo in onclick, here is the working version.
let counter = 0;
function count() {
counter++;
document.querySelector('#counter').innerHTML = counter;
}
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1 id="counter">0</h1>
<button onclick="count()">Click Here!</button>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Receiving the following error in developer console when loading the page:
Uncaught ReferenceError: toastr is not defined
Here are the html contents. Can someone please explain to me why toastr is undefined?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
</head>
<body>
<p>Toastr TEST</p>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script scr="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.2/js/toastr.min.js">
</script>
<script>
$(document).ready(function() {
console.log("document.ready");
toastr.info('document.ready');
});
$(window).load(function() {
console.log("window.load");
toastr.info('window.load');
});
</script>
</body>
</html>
You have the script elemen's src attribute wrongly spelled for the toaster.js file, it should be "src" but is "scr".
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I have spent far too much trying to get a simple jquery and input box example to work.
When someone finishes typing something into the input box, I want jquery to popup an alert. Eventually I will be doing some more code with this but right now I just want to get this working!
Here is my example, which doesn't seem to work:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#selector').change(function () {
alert($('#selector').val());
});
</script>
</head>
<body>
<input type="text" id="selector">
</body>
</html>
Any ideas?
Wrap your jquery inside document.ready() as shown :
<script type="text/javascript">
$(document).ready(function(){
$('#selector').change(function () {
alert($('#selector').val());
});
});
</script>
Read More here about document.ready().
EDIT :- If you want to alert on 'someone finishes typing(as given in your question)' then use .focusout() event as shown :
<script type="text/javascript">
$(document).ready(function(){
$('#selector').focusout(function () {
alert($('#selector').val());
});
});
</script>
DEMO
Add Document ready.
$(function(){
$('#selector').change(function () {
alert($('#selector').val());
});
});
</script>
You must use .focusout
$('#selector').focusout(function () {
alert($('#selector').val());
});
working example http://jsfiddle.net/2w7gyjgy/
You need to put your code in a document ready handler -
<script type="text/javascript">
$(document).ready(function() {
$('#selector').change(function () {
alert($('#selector').val());
});
});
</script>
Use Document.ready in your script yo bootstrap on page
$(document).ready(function(){// apply this
$('#selector').change(function () {
alert($('#selector').val());
});
});
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
EDIT Here is new code but it is still not working for me.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="mycss.css">
<script src="myjavascript2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button onclick="myFunction()">Play</button>
<p id="test"></p>
</body>
</html>
Javascript:
var things = ['rock','paper','scissors'];
function myFunction() {
var i = Math.floor(Math.random()*things.length));
document.getElementById("test"+(i+1)).innerHTML=things[i];
}
I added this text so that it would let me post the edit, please ignore this.
You could simply replace your whole code with
var things = ['rock','paper','scissors'];
var i = Math.floor((Math.random()*things.length));
document.getElementById("test").innerHTML=things[i];
This would also let you more easily deal with other operations, like finding a winner.