Ok. so i am learning how to make a clock. went to W3schools to check out the code. now i want to mess around with it from military time and so forth. but i cant seem to get the code to work. when i take the code and put it in a JS file. i do not get the code running. If i put it in the HTML as embedded it works? what am i doing wrong here?
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
HTMl is as follows
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>City Clock</title>
<link rel="stylesheet" href="clock.css">
</head>
<body>
<h1> Austen's Clock</h1>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
<script type="text/javascript" src="clock.js"></script>
</body>
</html>
move <script type="text/javascript" src="clock.js"></script> into head of the document
OR
Rewrite you code like this
window.onload = function startTime() {.....
You've included the <script> tag after the first closing </html> tag - there shouldn't be any other elements after that, so they should be ignored.
Move it so that it's the last thing inside the </body> tag.
[FWIW, you code actually does work for me in both Chrome and Firefox on MacOS X. In Chrome at least, the <script> element was automatically moved inside the </body> tag by the browser.]
Recap of the previous replies:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>City Clock</title>
<link rel="stylesheet" href="clock.css">
<script type="text/javascript" src="clock.js"></script>
</head>
<body onload="startTime()">
<h1> Austen's Clock</h1>
<div id="txt"></div>
</body>
</html>
Related
so... today I started to learn a bit of jquery and Im trying to make a little text-animation with the words 'improvise' 'adapt' and 'overcome' (idea comes from meme) but when I use
improvise.animate({left: "50px"})
with improvise being the text-element, just nothing happens.
Here is my code(very bad code, but Im beginner), I hope you can help me.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<h1 id="improvise">Improvise</h1>
<h1 id="adapt">Adapt</h1>
<h1 id="overcome">Overcome</h1>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
JS:
let improvise = $("#improvise")
let adapt = $("#adapt")
let overcome = $("#overcome")
improvise.hide()
adapt.hide()
overcome.hide()
function start(){
setTimeout(function(){improvise.fadeIn()}, 0)
setTimeout(function(){adapt.fadeIn()}, 1000)
setTimeout(function(){overcome.fadeIn()}, 2000)
setTimeout(function(){improvise.animate({left: "50px"}, 500)}, 3000)
}
You aren't calling your start() function anywhere, so that's why nothing's really happening.
And inside your css you need to give your #improvise element the position: relative property.
I am trying to access this url via javascript to loaf a function in my js page:
url which contains a function
Then I will easily call the function and load some info.
I have the following code:
document.write('<SCRIPT LANGUAGE=JavaScript SRC="https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads"></SCRIPT>');
OAS_RICH('UNKNOWN');
and my html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="mobile-ad">
<div class="sidebox advertisement">
<script type="text/javascript" src="/test/ads.js"></script>
</div>
</div>
Now my problem when I run it I get "Uncaught ReferenceError: OAS_RICH is not defined" which means that the function loading does not work via
Can anyone help why it is not working ? Am I missing anything?
why you are not putting your script balise directly in the head of the html page.
Then at the end of the body you add a script that call your function.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads"></script>
</head>
<body>
<div id="mobile-ad">
<div class="sidebox advertisement">
<script type="text/javascript" src="/test/ads.js"></script>
</div>
<script>
OAS_RICH('UNKNOWN');
</script>
</div>
</body>
You need this:
<script id="adscript"></script>
<script>
var adScript = document.getElementById("adscript");
adScript.addEventListener("load", function () {
OAS_RICH('UNKNOWN');
});
adScript.src = "https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads";
</script>
Lets say you have a main .html:
<!DOCTYPE html>
<html>
<head>
<title>Page One</title>
<script type="text/javascript" src="javaS.js"></script>
<link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body id="main">
<h3>Test switching html content inside iframe</h3>
<p>iframe:</p>
<iframe src="" id="iframe1"></iframe>
</body>
</html>
And a secondary .html:
<!DOCTYPE html>
<html>
<head>
<title>Page two</title>
<link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body id="test">
<h3>Test subject</h3>
<p>subjugate text</p>
</body>
</html>
How would you display the local second .html inside the iframe element of the first .html, using only JavaScript?
I have tried using these snippets:
window.onload = function() {window.frames['iframe1'].location.replace("Secondary.html");}
.
var iframe = document.getElementById('iframe1');
iframe.src = "second.html";
...But these haven't worked. I'm new at this so the answer might be fairly obvious, but any guidance would be very much appreciated!
I use this and it works well:
window.onload = function()
{
document.getElementById('iframe1').src = "Secondary.html";
}
document.getElementsByTagName("iframe")[0].setAttribute("src", "http://your-url.com");
Your second snippet is perfect. You just have to make sure that it runs when iframe DOM element exists - in window.onload.
I just combined the two exampples you had tried to make one working example, see here: https://jsfiddle.net/4p18mxg9/9/
var iframe = document.getElementById('iframe1');
window.onload = function() {
iframe.src = "second.html";
}
I am a beginner to javascript. I am currently learning it.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<meta http-equiv="author" content="#infinity">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<script src="javascript.js"></script>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
</body>
</html>
Javascript:
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
Now I think that this should work, but its not working. The text of the <div id="cost"> remains same.
Please help.
Most likely you are trying to update the DOM even before it is loaded - you can make sure the javascript is executed after the DOM is loaded by keeping JS at the end of the body tag like below -
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
<script>
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
</scirpt>
</body>
</html>
Start reading from here about Window load vs DOM load events
I am very new to web development. I am trying to use jquery to show slider on the web-page. However, I am not able to see the silder on the web-page. I tried debugging the code via. firebug. However, I don't see any error over there. Can somebody please tell me on what I am missing possibly?
I am using Linux - Fedora core 16 and Firefox- 38.0.5 to run this code
index.html
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
Here is the jqueryTutorial.js file.
(function() {
$("#slider").slider();
})();
There are no errors in the firebug console.
Here is the screen shot.
Finally, I did the following from the source - jquery slider
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Now, I see the following error on the firebug.
ReferenceError: $ is not defined
$(function() {
index.html (line 11, col 2)
Try this:
jQuery(document).ready(function () {
(function() {
$("#slider").slider();
})();
});
EDITED:
Ok , the issue comes from the tags.
You wrote this:
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
And you HAVE to write this:
<!DOCTYPE html>
<html>
<head>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
</head>
<body>
<div id="slider"> </div>
</body>
</html>
;-)
EDITED AGAIN
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
jQuery(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Include your <script> tags before closing body tag </body>. Moreover you have some mistakes in your markup, like the <title> should be inside <head> tag( for heading use <h1> upto <h7> tags ). Like this:
<!DOCTYPE html>
<html>
<head>
<title>"My Page"</title>
</head>
<body>
<h1>hello jQuery</h1>
<div id="slider"></div>
<!-- load scripts -->
<script src="jquery-2.1.4.min.js">
</script>
<script src="js/jquery-ui.js">
</script>
<script src="js/jqueryTutorial.js">
</script>
</body>
</html>
And your javascript will simply be:
$('#slider').slider();
if that doesn't works try:
$(document).ready( function () {
$('#slider').slider();
}
Because if you include them at beginning, whole HTML document will not be completely loaded at the time the scripts get executed, so the script won't be able to find elements.
And I don't think .slider() gives you what you want. I suggest you learn more first. Try www.codecademy.com