I am trying to get minutes in drop down using javascript.
in JSfiddle it works however when I use it in my page it doesn't.
Here is my code.
<html>
<head>
<script src="js/jquery.js" ></script>
<script type="text\javascript">
function myFunction() {
var minutes = [],
select = document.getElementById( 'minutes' );
for( minutes=1;minutes<=59;minutes++ ) {
select.add( new Option(minutes) );
};
</script>
</head>
<body>
<p>
<select id="minutes"></select>
</p>
</body>
</html>
The slash direction is wrong. Should be text/javascript not text\javascript
Also move the contents of the function to the global scope.
You need to wrap the code in $(document.ready() like below:
Also, you need to call myFunction, which I don't see.
Additionally, modify <script type="text\javascript"> to <script type="text/javascript">
$(document).ready(function () {
function myFunction() {
var minutes = [],
select = document.getElementById('minutes');
for (minutes = 1; minutes <= 59; minutes++) {
select.add(new Option(minutes));
};
}
myFunction();//<---Call here
});
Related
I would appreciate some orientation in the following issue.
I want to set a cookie when a page loads. The cookie value should taken from a div data-myifo attribute within the HTML code.
My current code looks as follows:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id=someid data-myinfo="yyyyy">Hello World</div>
<script type="text/javascript">
function set_cookie (cookieName,cookieValue,nDays) {
var today = new Date();
var expire = new Date();
if (nDays==null || nDays==0) nDays=1;
expire.setTime(today.getTime() + 3600000*24*nDays);
document.cookie = cookieName+"="+escape(cookieValue)
+ ";expires="+expire.toGMTString()
+ "; path=/";
}
function get_atribute () {
var myinfo = document.getElementsByTagName("div")[0].getAttribute("data-myinfo");
set_cookie ("My_Cookie", myinfo);
}
$(document).ready(function () {
get_atribute ();
});
</script>
</body>
</html>
I've tried running the function get_atribute () using a onclick="get_atribute ()" and that way it works but not on page load or after.
What am I missing?
No need to use jQuery here
Could just use:
(function() {
get_attribute();
})();
This question already has answers here:
JSFiddle code not working in my own page
(3 answers)
Closed 8 years ago.
my code is working in jsfiddle but not working in the browser i dont know what i missed here could you please check it and tell me the solution. i google it but i am not getting correct solution please help me
this is jsfiddle link http://jsfiddle.net/pLTrJ/9/
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
</head>
<script type="text/javascript">
var random = 0;
var theDiv = document.getElementById("showVal");
updateTheDiv(9,0);
function updateTheDiv(inRange, inMin) {
random = (Math.random()*inRange+inMin)|0;
theDiv.innerHTML = random;
var nextCall = (Math.random()*1000)|0;
setTimeout(function() {
updateTheDiv(inRange, inMin);
}, nextCall);
}
</script>
<body>
<div id="showVal"></div>
</body>
</html>
jsfiddle has wrapped it automatically in the onload event. You haven't done this in your HTML page, so when it runs in the browser you're trying to get hold of the div before it's been rendered, so theDiv is null.
The below should work:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
</head>
<script type="text/javascript">
window.onload = function () {
var random = 0;
var theDiv = document.getElementById("showVal");
updateTheDiv(9, 0);
function updateTheDiv(inRange, inMin) {
random = (Math.random() * inRange + inMin) | 0;
theDiv.innerHTML = random;
var nextCall = (Math.random() * 1000) | 0;
setTimeout(function () {
updateTheDiv(inRange, inMin);
}, nextCall);
}
}
</script>
<body>
<div id="showVal">
</div>
</body>
</html>
Try this in your Browser ;)
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
</head>
<body>
<div id="showVal"></div>
</body>
<script type="text/javascript">
var random = 0;
var theDiv = document.getElementById("showVal");
updateTheDiv(9,0);
function updateTheDiv(inRange, inMin) {
random = (Math.random()*inRange+inMin)|0;
theDiv.innerHTML = random;
var nextCall = (Math.random()*1000)|0;
setTimeout(function() {
updateTheDiv(inRange, inMin);
}, nextCall);
}
</script>
</html>
(I just put the script to the bottom. So the script loads after your element is set.)
This is works fine when i am using addEventListener. But, it is not working when i use button.click . what is the mistake on the below code? what is the cause it is not working on varNext.click= myFunc;?
[code]
<!doctype html>
<html>
<head>
<title>Slideshow</title>
<script type="text/javascript">
var images = ['home_default.png','about_default.png','blog_default.png','logo.png'];
function myFunc(){
var var1 = document.getElementById("slideimage");
var var2 = var1.name.split("_");
//alert(var2);
index = var2[1];
if(index == images.length - 1){
index = 0;
}else {index++;}
var1.name = "image_" + index;
var1.src = images[index];
}
</script>
</head>
<body>
<p><img id="slideimage" name="image_0" src="home_default.png" alt="Home"></p>
<form name="slideform">
<input type="button" id="nextbtn" value="Next">
</form>
<script type="text/javascript">
var varNext = document.getElementById("nextbtn");
//varNext.addEventListener("click", myFunc, false);
varNext.click= myFunc;
</script>
</body>
</html>
[/code]
Rather than .clickfires the element's click event it must be .onclickproperty returns the onClick event handler
Try this
varNext.onclick = myFunc;
Demo Fiddle of your code
You need to use the onclick attribute
varNext.onclick = myFunc;
Hi I am new to Javascript and am trying to create a function that checks two dates. I have read it is useful to put the JS in the head part of the document, but this is not returning anything. I am also new to stackoverflow so I hope I did this correctly. :) Does anyone see the error?
<!DOCTYPE html>
<html>
<head>
var myDate = new Date(); // Your timezone!
var myEpoch = myDate.getTime()/1000;
var deadline = '1341596750.000';
document.write(myEpoch);
document.write("<br>",deadline);
if (myEpoch < deadline) {
document.write("<p>Just in time!</p>");
} else {
document.write("<p>Too late!</p>");
}
</head>
<body>
<br><br><br><br>http://www.epochconverter.com/
</body>
</html>
You have to mention it's a script using <script>. Also you shouldn't output DOM in the <head> like you are doing with document.write. Manipulate the DOM like this instead:
<head>
<script type="text/javascript">
var myDate = new Date(); // Your timezone!
var myEpoch = myDate.getTime()/1000;
var deadline = '1341596750.000';
document.write(myEpoch);
document.write("<br>",deadline);
if (myEpoch < deadline) {
document.getElementById("useme").innerHTML("Just in time!");
} else {
document.getElementById("useme").innerHTML("Too late!");
}
</script>
</head>
<body>
<p id="useme"></p>
Please check out this jsfiddle:
http://jsfiddle.net/xNEZH/2/
It works fine in my jsfiddle
[BOX APPEARS WHEN TEXT IS INPUTTED IN INPUT]
but doesn't work on my browsers BUT I am using the latest versions of safari, firefox and chrome.
What is the matter?
HTML / JAVASCRIPT CODE:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script>
$(document).ready(function () {
(function watchInputForChanges(){
var hasInput = $('.input1').val() != "";
$('.box')[hasInput ? 'show' : 'hide']();
setTimeout(watchInputForChanges, 100);
})();
});
</script>
<link href="cloud.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="center1">
<form>
<input type="text" class="input1" autofocus="focus" />
</form>
</div>
<br><br>
<div class="center1">
<div class="box">f</div>
</div>
</body>
</html>
I believe that you need to add this:
$(document).ready(function () {
//function name does not exist outside this scope
(function watchInputForChanges(){
var hasInput = $('.input1').val() != "";
$('.box')[hasInput ? 'show' : 'hide']();
setTimeout(watchInputForChanges, 100);
})();
});
Drav Sloan pointed out that you are missing the jQuery include as well
Apologies for not answering the direct question (simply "why doesn't this work outside of fiddle?") but I can't resist: not sure why you're polling for changes; you can bind a listener to the element. For example (in the document ready function...)
In the HTML itself:
<script src="/scripts/jquery.js"></script> <!--or wherever your script source is!!-->
Then if you're putting your scripts into tags on the same page (instead of external):
<script>
$(document).ready(function () {
(function() {
$input = $('.input1');
$box = $('.box');
$input.on('keypress input paste', function() {
if ($box.not(':visible') && $input.val() != "") {
$box.show();
} else {
$box.hide();
}
});
})();
});
</script>
Catches manual entry or pasted entry.
http://jsfiddle.net/xNEZH/12/