I am trying to make a video player using html and .js, however the attach1.js file cannot be called by html. Following is my html file:
<!Doctype html>
<html lang='en'>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="attach1.css">
<script type="text/javascript" src="attach1.js"> </script>
</head>
<body>
<section id="skin">
<video id="myMovie" width="640" height="360">
<source src="bnm.mp4">
</video>
<nav>
<div id="buttons">
<button type="button" id="playButton"> Play
</button>
</div>
<div id="defaultBar">
<div id="progressBar"> </div>
</div>
<div style="clear:both"> </div>
</nav>
</section>
</body>
</html>
Following is my attach1.js:
document.write('Hi');
function doFirst()
{
barSize=600;
myMovie1=document.getElementbyId('myMovie');
playButton1=document.getElementbyId('playButton');
bar=document.getELementbyId('defaultBar');
progressBar1=document.getElementById('progressBar');
document.write('Hi');
playButton1.addEventListener('click', playorpause, false);
bar.addEventListener('click', clicker, false);
}
function playorpause()
{
if(!myMovie1.paused && !myMovie1.ended)
{
myMovie1.pause();
playButton1.innerHTML='Play';
window.clearInterval(updateBar);
}
else
{
myMovie1.play();
playButton1.innerHTML='Pause';
updateBar=setInterval(update, 500);
}
}
function update()
{
if(!myMovie1.ended)
{
var size=parseInt(myMovie1.currentTime*barSize/myMovie1.duration);
progressBar1.style.width=size+'px';
}
else
{
progressBar1.style.width='0px';
playButton1.innerHTML='Play';
window.clearInteval(updateBar);
}
}
function clicker(e);
{
if(!myMovie1.paused && !myMovie1.ended)
{
var mouseX=e.pageX-bar.offsetLeft;
var newtime=mouseX*myMovie1.duration/barSize;
myMovie1.currentTime=newtime;
progressBar1.style.width=mouseX+'px';
}
}
window.addEventListener('load', doFirst, false);
The attach1.js would not even print 'Hi' (in the first line of .js file). This would imply that the file is not being called by the .html file. However, I cannot figure out a reason for this.
Any help is appreciated. Thanks.
you've got:
function clicker(e);
{
//code
}
rather than
function clicker(e)
{
//code
}
I'm also getting a file not found error for attach1.css, but that's because I don't have your .css file
edit
You're calling document.getElementbyId vs document.getElementById
You really ought to check out the developer tools. they're your friend.
You have to call the functions in attach1.js by either putting another tag in your html, or by calling it using a button, like this:
<button type='button' onclick="play function()">Play</button>
Just replace "play function" with the name of the function that you have to play stuff.
you have an error in your code, remove the semi-column from this line
function clicker(e);
It would be a good idea to look at the errors in the js console
Related
I have separated files for the HTML and JS code.. I want to make a function which allows me to change the image when I click on it with another (like an array of images(?)) the HTML-JS link is done like this:
<script src="file.js"></script>
My HTML is here:
`
<!DOCTYPE html>
<html>
<head>
<script src="proiect.js"></script>
</head>
<body>
<img src="images/image7.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(1)">
<img src="images/image10.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(0)">
</body>
</html>
`
My JS code:
var wrapper = function changeImg(param) {
'use strict';
var preloads=[],c;
function preload(){
for(c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
c=0;
}
if (param==1){
preload('src1');
alert("param=1");}
if(param==0){
preload('src2');
alert("param=0");
}
document.getElementsByClassName('dynamic-image').addEventListener('click',
function() {
c++;
if(c==preloads.length) {
c=0;
}
this.src=preloads[c].src;
});
}
wrapper(param);
My problem is that when I click on the image it shows the message (param=1 / param=0), but it won't change the image and I don't understand why ...
Always put your scripts at the end of your body because your script need to wait that all your ressources are loaded.
You need to do just this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="images/image7.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(1)">
<img src="images/image10.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(0)">
<script src="proiect.js"></script> <!-- SCRIPT TAG AT THE END OF BODY TAG -->
</body>
</html>
The entire problem is this: when you put your script tag in the head, your function triggers before the DOM is created... so it executes before the images are even created. The best-practice is to put your scripts at the end of the body tag.
Your JavaScript file needs to be on the bottom of the page, after all <img> tags are loaded.
You can format your HTML as so:
<!doctype html>
<html>
<body>
<img src="images/image7.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(1)">
<img src="images/image10.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(0)">
<script type="text/javascript" src="proiect.js"></script>
</body>
</html>
You don't need your "wrapper(param);" in your proiect.js file because the function is called by the attributes "onclick" of your images.
With the addEventListener function, you can't get the object used, you have to use jquery framework with something like:
var wrapper = function changeImg(param) {
'use strict';
var preloads=[],c;
function preload(){
for(c=0; c<arguments.length; c++) {
preloads[preloads.length] = new Image();
preloads[preloads.length-1].src = arguments[c];
}
c=0;
}
if (param == 1){
preload('images/image10.jpg');
// alert("param=1");
}
if(param == 0){
preload('images/image7.jpg');
// alert("param=0");
}
$('.dynamic-image').on('click', function() {
c++;
if(c == preloads.length) {
c=0;
}
console.log(this.src);
this.src = preloads[c].src;
});
}
And your HTML file:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="images/image7.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(1)">
<img src="images/image10.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(0)">
<script src="proiect.js"></script>
<script src="jquery.min.js"></script>
</body>
</html>
And of course add the "jquery.min.js" file in your folder: https://jquery.com/download/
I know that it's not exactly what you want but it can help you ;-)
I have a document where it goes like this:
<!DOCTYPE html>
<html>
<head>
<!-- some title, meta stuff and css -->
</head>
<body>
<style src="/secondvid.js"></style>
<div id="vid1"></div>
<button onclick="showSecondVid('vid1', 'vid2');">Video 2</button>
<div id="vid2" style="display: none;"></div>
</body>
</html>
What is inside the divs is not important, but the script looks like this:
function showSecondVid(vid1Id, vid2Id) {
document.getElementById(vid1Id).style.display = "none";
document.getElementById(vid2Id).style.display = "block";
document.querySelectorAll('button')[0].style.display = "none";
dayUp();
}
function dayUp() {
if (localStorage.dayFinished === 4) {
localStorage.dayFinished = 0;
} else if (localStorage.dayFinished) {
localStorage.dayFinished++;
}
}
When I click the button, nothing happens. Can someone help?
I want the first div to disappear and the second one to appear.
Try to call your script like this :
<script src="/secondvid.js"></script>
instead of
<style src="/secondvid.js"></style>
<!DOCTYPE html>
<html>
<head>
<script>
//if i put window.location= "index.php" here not inside js function it worked but I need it to be inside a function
function newLoad() {
window.location= "index.php"
}
</script>
</head>
<body>
<input type="button" value="press here" onclick="newLoad()">
</body>
</html>
any Ideas how can I make it work inside the javascript function ?
Your code works. Howether, you don't need to use javascript.
<a href="index.php">
<button>press here</button>
</a>
I have a problem that some link we show is separeted from the rest of the page itself, so the link showes up immediatly as you open the page but the page takes 2-3 seconds to load, I'm trying to delay the link (in this example it's google) so it will show up a few seconds after the page is loaded.
am I getting close?
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show(), 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com;
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<style>
#Link{display:none;}
</style>
<body window.onLoad="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</div>
</body>
</html>
You have a few errors in your page which is stopping this from working:
Usually the first thing to check when something is not working is the browser console (press F12) and looks for errors. This won't fix problems with logic but should put you in a good position to start debugging things.
You have a missing " syntax error in exportSrc - this will show in the browser console
The load attribute in the body is incorrect. You should just use onload="myFunction()"
Your setTimeout is calling show instead of referencing it. Remove the ()s.
Put the <style> tags inside the <head>
You have an extra </div> tag
This should work better:
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<style>
#Link{display:none;}
</style>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show, 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com";
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<body onload="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</body>
</html>
Try
<body onLoad="myFunction();">
Instead of window.onLoad
I have the following code
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div class="full-details-box" name="full_details_box" id="full-details-box"></div>
<hr />
<script type='text/javascript'>
function show_3136(){
document.full_details_box.style.display='block';
}
show_3136();
</script>
</body>
</html>
I get the error: window.document.full_details_box is undefined
I get the error for the line:
document.full_details_box.style.display='block';
But I do have a <div> element with the name full_details_box, so why the error?
Don't use the name attribute for divs. It doesn't even exist. Use the id, and:
document.getElementById('full-details-box')...
function show_3136(){
document.getElementById('full_details_box').style.display='block';
}
To access this element, use getElementById
function show_3136() {
document.getElementById("full-details-box").style.display = "block";
}
You could do a
document.getElementById("full-details-box").style.display='block';
Just to add to your confusion - you may have been thinking about form fields
All of these will work on a form field (the first only if you wrap the field in form tags)
<html>
<head>
<script type='text/javascript'>
function showFormField(){
document.forms[0].full_details_boxName.style.display='block';
// or document.forms[0].elements["full_details_boxName"].style.display='block';
}
function showNamedField(){
document.getElementsByName("full_details_boxName")[0].style.display='block';
}
function showFieldById(){
document.getElementsById("full_details_boxID").style.display='block';
}
function showFieldByClassName(){ // does not work in all IE browsers
document.getElementsByClassName("full_details_boxCLASS")[0].style.display='block';
}
</script>
</head>
<body>
<form>
<input class="full-details-boxCLASS" name="full_details_boxName" id="full-details-boxID"/>
</form>
</body>
</html>
for a DIV you will use ID or CLASS, but not name
HTML:
<div id="full-details-box">
Just some test content
</div>
<hr />
CSS:
div#full-details-box {
display:none;
}
JS:
function show_3136(){
document.getElementById("full-details-box").style.display = "block";
}
show_3136();
For a working example, see jsFiddle