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 ;-)
Related
$(document).ready(function() {
var aa = $('.page-1 img').attr('src');
alert(aa);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img src="dddddd.jpg" width="76" height="100" class="page-1" />
</body>
</html>
while getting image scr using jquery returns undefined can anyone solve this problem?
Your selector should be img.page-1.
.page-1 img will try to find img tag inside an element with class .page-1.
$(document).ready(function() {
var aa = $('img.page-1').attr('src');
alert(aa);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://placebear.com/g/200/300" width="76" height="100" class="page-1" />
You are using selector in wrong way. That's why script is return error. Since .page-1 is on the same element you need select it by following pattern.
$('img.page-1').attr('src');
<script>
$(document).ready(function(){
var aa= $('img.page-1').attr('src');
alert(aa);
});
</script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img src="https://www.google.ae/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" width="76" height="100" class="page-1" />
</body>
</html>
.page-1 img this method will find the child img element of .page-1. Since it is not and there is no child element so selector won't work.
I've read many tutorials and tried them, but they don't work.
Just for example I wrote this simple code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement"> Html text</p>
<script>
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
</script>
</body>
</html>
I get Test Message text in my page.
Then I put my JS code to an external file: '/js/js.js'
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
And modify the HTML file to:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/js.js"></script>
</head>
<body>
<p id="testElement"> Html text</p>
</body>
</html>
When I open the HTML file in a browser, I only get Html text. My JS does not work. Please explain what I am doing wrong.
Your problem is that javascript linked in head is executed before the body is loaded, so you can just put the script at the end of the body like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement"> Html text</p>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>
Check the JavaScript error console.
Your code runs before the document is rendered so the node testElemet doesn't exist.
Either move your script-include down as the last element in the body or wrap your code in a load/ready event.
function on_document_ready(callback) {
if (document.readyState === "complete") {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
}
on_document_ready(function () {
var paragraph = document.getElementById("testElemet");
paragraph.innerHTML = "Test Message";
});
This should work fine:
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement">Html text</p>
<script type="text/javascript" src="/js/js.js"></script>
</body>
</html>
Please make sure that <script type="text/javascript" src="/js/js.js"></script> is placed just before </body>.
Try this
var doSomething = function()
{
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js.js"></script>
</head>
<body onload = "doSomething();">
<p id="testElement"> Html text</p>
</body>
</html>
Try saving both the files in the same folder.
Make use of your browsers developer console, to determine whether any errors have occurred.
Regarding 'onload', you can have a look at this link.
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 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
I am trying to add a source to an image through Javascript, and some JQuery code I found on internet, but it doesn't seem to work:
<html>
<head>
<script src = "http://www.example.com/images/">
var count=1;
var initnumber=100;
function changeImage(){
count++;
$("#HTMLPhoto").attr('src'+((initnumber+count).toString)+".jpg");
}
</script>
</head>
<body onload="changeImage()" >
<img id="HTMLPhoto"/>
<button onclick="changeImage()">Next Image</button>
</body>
I am also trying to call once again the changeImage() function with button clicks.
Edit:Managed to make it work, I changed the code a bit, if anyone wants to see:
<html>
<head>
<script>
var count=1;
function nextImage(address){
count++;
image = document.getElementById('HTMLPhoto');
image.src ="http://www.example.com/images/"+(address+count)+".jpg";
}
</script>
</head>
<body>
<img id="HTMLPhoto"/>
<button onclick="nextImage(100)">Next Image</button>
</body>
Change:
$("#HTMLPhoto").attr('src'+((initnumber+count).toString())+".jpg");
To:
$("#HTMLPhoto").attr('src', ((initnumber+count).toString())+".jpg");