I wish to change the font-family of a paragraph continuously after every 1 second.. Here is my non-working code...
<!DOCTYPE html>
<html>
<head>
<script src = "jquery.js"> </script>
<script>
$(document).ready(function() {
var idee = document.getElementById('p1');
changeFont();
});
function changeFont()
{
if(idee.style.fontFamily == 'times')
{
idee.style.fontFamily = 'courier';
}
else if(idee.style.fontFamily == 'courier')
{
idee.style.fontFamily = 'times';
}
setTimeout(changeFont, 1000);
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
</body>
</html>
So.. what am I doing wrong? How to change font conditionally?
This code works fine..
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
function changeFont()
{
var idee = document.getElementById("p1").style.fontFamily;
if( idee == 'times')
{
document.getElementById("p1").style.fontFamily = 'courier';
}
else if(idee == 'courier')
{
document.getElementById("p1").style.fontFamily = 'times';
}
var int=setTimeout(function(){changeFont();},1000);
}
</script>
</head>
<body onload=" changeFont();">
<p id="p1" style="font-family: times;">This is some text.</p>
</body>
</html>
you have set var idee in the anonymous function inside the document ready but you're not passing it to changeFont, you're just calling changeFont and hoping that it's there on the global namespace.
try this first:
<!DOCTYPE html>
<html>
<head>
<script src = "jquery.js"> </script>
<script>
$(document).ready(function() {
var idee = document.getElementById('p1');
changeFont(idee);
});
function changeFont(idee)
{
if(idee.style.fontFamily == 'times')
{
idee.style.fontFamily = 'courier';
}
else if(idee.style.fontFamily == 'courier')
{
idee.style.fontFamily = 'times';
}
setTimeout(function() {changeFont(idee)}, 1000);
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
</body>
</html>
idee is being declared inside the anonymous function.
It will not be visible in changeFont.
<script>
var idee;
$(document).ready(function() {
idee = document.getElementById('p1');
changeFont();
});
AND
setTimeout('changeFont()',1000);
Related
I've called two functions in my HTML
<body onload="myFunction()" onmousemove="myFunction1()">
I want to execute these two functions from a javascript file and call this file in my HTML like
<script type="text/javascript" src="path/to/functions.js"></script>
i.e. both the functions will be called from the javascript file, not from html.
I have tried
window.addEventListener('load', myFunction());
window.addEventListener('onmousemove', myFunction1());
or
$(window).load(function () {
myFunction();
});
$(window).onmousemove(function () {
myFunction1();
});
but failed.
What should I do ?
DETAILS
I have a javascript file where some functions are there.
script.js
function myFunction() {
alert("This is my function");
}
function myFunction1() {
alert("This is my second function");
}
I called these functions in my html body tag
<body onload="myFunction()" onmousemove="myFunction1()">
Now I want to call these two functions from my script.js like
window.addEventListener('load', myFunction());
window.addEventListener('onmousemove', myFunction1());
what should I do ?
I think you have understood my requirement.
Your code should read like this:
window.addEventListener('load' , myFunction );
window.addEventListener('mousemove' , myFunction1 );
But if it still does not work for you, Try this:
window.onload = myFunction ;
window.onmousemove = myFunction1 ;
Check this: onload and this: onmousemove
Try
function number1(){
document.querySelector("#info").innerHTML = "LOAD";
}
function number2(){
var x = event.clientX;
var y = event.clientY;
document.querySelector("#info").innerHTML = "MouseMove: ( x:"+x+" , y:"+y+") ";
}
window.onload = function(){
number1()
}
window.onmousemove = function(){
number2()
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="info">waiting</div>
</body>
</html>
I think You should verify that your (.js) file is loaded with the page or not?
Because i have tried both the example and both r working
window.addEventListener('load', myFunction); and window.addEventListener('load', myFunction());
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("Page is loaded");
}
window.addEventListener('load', myFunction);
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
or
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("Page is loaded");
}
window.addEventListener('load', myFunction());
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
When ever I try to click on the image, the image changes but the next image in the array is not displayed
<!doctype html>
<html>
<head>
<title>
slides
</title>
<script type="text/javascript">
function nextslide(){
var images = new Array()
images[0]= "home.jpg"
images[1]= "left.jpg"
images[2]= "right.jpg"
var currentpic=0
var lastpic= images.lenth-1;
if (currentpic =lastpic)
{
currentpic=0;
document.getElementById('slide').src = images[currentpic];
}else
{
currentpic++;
document.getElementById('slide').src = images[currentpic];
}
}
</script>
</head>
<body>
<img src="home.jpg" id="slide" onclick="nextslide()">
</body>
</html>
Help would be greatly appreciated.
Thank you for the help.
There are several things wrong with your code. Here is the fixed version:
<!doctype html>
<html>
<head>
<title>slides</title>
<script type="text/javascript">
var images = new Array();
images[0] = "home.jpg";
images[1] = "left.jpg";
images[2] = "right.jpg";
var currentpic = 0;
var lastpic = images.length-1;
function nextslide()
{
if (currentpic == lastpic)
{
currentpic = 0;
document.getElementById('slide').src = images[currentpic];
}
else
{
currentpic++;
document.getElementById('slide').src = images[currentpic];
}
}
</script>
</head>
<body>
<img src="home.jpg" id="slide" onclick="nextslide()">
</body>
</html>
What's wrong?
var lastpic= images.lenth-1; You're missing a g in length.
if (currentpic =lastpic) To check if var1 is the same as var2, you need to use == instead of =
You're missing a couple of semicolons.
You should declare currentpic, images, and lastpic outside of your function to make it actually set the image as the next image.
To try and debug yourself
Always check your browser's developer console for errors.
try this
1.) Specify globallythis variable
var currentpic=0;
2.) Change in images.lenth to images.length
3.) Change if (currentpic =lastpic) to if (currentpic ==lastpic)
<!doctype html>
<html>
<head>
<title>
slides
</title>
<script type="text/javascript">
var currentpic=0;
function nextslide(){
var images = new Array()
images[0]= "http://thewowstyle.com/wp-content/uploads/2015/04/Cartoon.jpg"
images[1]= "http://vignette2.wikia.nocookie.net/epicrapbattlesofhistory/images/1/10/Penguin-cartoon.png/revision/latest?cb=20141207223335"
images[2]= "http://cliparts.co/cliparts/kiK/Byz/kiKByzxoT.jpg"
var lastpic= images.length-1;
if (currentpic ==lastpic)
{
currentpic=0;
document.getElementById('slide').src = images[currentpic];
}else
{
currentpic++;
document.getElementById('slide').src = images[currentpic];
}
}
</script>
</head>
<body>
<img src="home.jpg" id="slide" onclick="nextslide()">
</body>
</html>
I am trying to implement module pattern in my code according to some examples online, what I am trying to achieve is to simply bind a button click event in my html to a function (which is not working), below is my HTML:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<input type="button" id="btn-msg" value="click me"/>
</body>
</html>
and here is my JS:
//CRUD Start
var Rutherford = Rutherford || {};
Rutherford.crud = function() {
function _readLists() {
alert("am here");
}
return {
readLists: _readLists
}
}
Rutherford.Initiate = function() {
$("#btn-msg").click(Rutherford.crud.readLists);
}
$(function() {
Rutherford.Initiate();
});
Here is as well a link to my plunker: http://plnkr.co/edit/tA94lzMPHkUOr8QuyJK8?p=preview
All what am trying to achieve is to bind the button to the function.
You need to call the anonymous function, not assign it. See the () below:
Rutherford.crud = (function() {
function _readLists() {
alert("am here");
}
return {
readLists: _readLists
}
}());
Here's an updated plunkr with this change: http://plnkr.co/edit/uiWHmtkMFEKywvFRk6DF?p=info
I believe that Evan Knowles wanted to say this:
//CRUD Start
var Rutherford = Rutherford || {};
Rutherford.crud = (function() {
function _readLists() {
alert("am here");
}
return {
readLists: _readLists
}
})( );
Rutherford.Initiate = function() {
$("#btn-msg").click(Rutherford.crud.readLists);
}
$(function() {
Rutherford.Initiate();
});
This would work properly if you can use Rutherford as a Singleton.
Why doesn't this code work? I want it to change the color of the input background whether the value is correct (green) or not (red).
<html>
<head>
<script type="text/javascript">
function funct1 () {
var username = "63XZ4";
if(username == document.getElementById('keygen').value ) {
document.getElementById('keygen').style.backgroundColor = '#5bc556';
}
else {
colorchange.style.backgroundColor = 'red';
}
}
return 0;
</script>
</head>
<body>
<input type="text" id="keygen">
<button onclick="funct1"></button>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function funct1 () {
var username = "63XZ4";
var keygen = document.getElementById('keygen');
if(username == keygen.value) {
keygen.style.backgroundColor = '#5bc556';
} else {
keygen.style.backgroundColor = 'red';
}
}
</script>
</head>
<body>
<input type="text" id="keygen" />
<button onclick="funct1()">Button Title</button>
</body>
</html>
The above should help. Also, you may want to look into this:
Give more descriptive names to functions you declare.
Save time by eliminating calls to "getElementById" by storing DOM elements in variables.
i tried to pop an alert when clicked on a div , didn't really succeed , i messed it a little to practice with objects.
here is the the code :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var mine = {
var start = {
modeBox : function(){
alert();
}
}
}
</script>
</head>
<body>
<div id="askMode" onclick="mine.start.modeBox();">My mine</div>
</body>
</html>
the problem : not alerting
why i don't get alert when i click on the div?
live example : http://jsfiddle.net/YqP93/
The following code tested in Firefox and Chrome:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var mine = {
start: {
modeBox : function(){
alert('Test');
}
}
}
</script>
</head>
<body>
<div id="askMode" onclick="mine.start.modeBox();">My mine</div>
</body>
</html>
NOTE: the code you posted in jsfiddle is not working, but you can copy and paste the code above that works in browsers mentioned.
this.mine = {
start: {
modeBox : function(){
alert();
}
}
you are trying to declare a var in an object literal. I don't think this is valid js for one but more importantly you can not get at vars declared in that scope. You have to assign the property to the object. You had it right with the modeBox.
Get rid of the var deceleration (why?):
mine = {
start: {
modeBox: function() {
alert();
}
}
};
Demo: http://jsfiddle.net/YqP93/3/
try this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var mine = {
start: {
modeBox: function(){
alert();
}
}
}
</script>
</head>
<body>
<div id="askMode" onclick="mine.start.modeBox();">My mine</div>
</body>
</html>