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");
Related
This question already has answers here:
Using HTML script tags to code while they have a source
(2 answers)
Closed 2 years ago.
<!DOCTYPE html>
<html>
<style></style>
<script src="main.js">
function myFunction() {
document.body.style.background = "url('images/img_tree.png')"
}
</script>
<body>
<button onclick="myFunction()">Set background</button>
</body></html>
Why won't this work? I am using the brackets IDE currently.
The problem is you set src="main.js", in this case all script inside script tag will be not execute, it only execute javascript in main.js file.
<!DOCTYPE html>
<html>
<style></style>
<script>
function myFunction() {
document.body.style.background = "url('https://geology.com/world/world-map-360.gif')"
}
</script>
<body>
<button onclick="myFunction()">Set background</button>
</body></html>
You need to remove the src="main.js" from your script tag
Does this fix it ?
<!DOCTYPE html>
<html>
<style></style>
<script>
function myFunction() {
document.body.style.background = "url('https://fsb.zobj.net/crop.php?r=e9wUbuA4gtFtr46UA2PE5GMcriRP4IPSzPTWOBs82VJEK_zIJcyRW5kh6JE_GrxfEmFki6gil-dD-LL5eMpMNcj5Sjw4u4Y6MwkMhR-1WlgJ50l6FRXVLRylR_2lbwvcMeLEOIUkEzNPODPaAqMfI4ClDs3vu9s3Z2s8bF55uCt0KPXzxye5ueQyfDyFFgfks2aGkOwr7pURMvK_')"
}
</script>
<body>
<button onclick="myFunction()">Set background</button>
</body>
</html>
Delete src="main.js" on script tag
if you want to use main.js file. you have to add extra script tag
like this
<!DOCTYPE html>
<html>
<style></style>
<script src="main.js"></script>
<script>
function myFunction() {
document.body.style.background = "url('images/img_tree.png')"
}
</script>
<body>
<button onclick="myFunction()">Set background</button>
</body></html>
Or you can add myFunction on your main.js file
Use the following code snippet for the add background image.
// Sets the background image
const setBackground = (image) => {
document.body.style.background = "url('"+IMAGE_URLS.[image]+"')";
};
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 ;-)
This is the script I am working with (below)
As the images are built into the script I am unsure on how to add a download link/link to website. to the second image
The script changes from image 1 to image 2 after 10 seconds and then I want then to be able to CLICK image 2 (like a button)
Here is the script I am working with if you could maybe help me with adding it in or tell me what I need to add in and where that would be much appreciated
<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<body>
<img id="img1" src="https://i.makeagif.com/media/1-28-2016/N_tuzx.gif" />
<script>
setTimeout(function(){
document.getElementById("img1").src = "https://2.bp.blogspot.com/-fgPjlOk4PWc/WzQrQ_NBxRI/AAAAAAAAAWw/bvINTos17nssgQXqhevQq97dvUfzINdhgCPcBGAYYCw/s320/download-2062197_960_720.png";
}, 10000);
</script>
</body>
</html>
Thank you for your time
After you've changed src of the image, just add a "click" event listener to it
setTimeout(function(){
document.getElementById("img1").src = "link";
document.getElementById("img1").addEventListener("click", function (event) {
// when someone clicks
});
}, 10000);
Use below code and replace Download_Link with desired link
<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<body>
<div id="wrapper">
<img id="img1" src="https://i.makeagif.com/media/1-28-2016/N_tuzx.gif" />
</div>
<script>
setTimeout(function(){
var mydiv = document.getElementById("img1");
var aTag = document.createElement('a');
aTag.setAttribute('href',"Download_Link");
aTag.setAttribute('download', true);
aTag.appendChild(mydiv);
document.getElementById("wrapper").appendChild(aTag);
document.getElementById("img1").src = "https://2.bp.blogspot.com/-fgPjlOk4PWc/WzQrQ_NBxRI/AAAAAAAAAWw/bvINTos17nssgQXqhevQq97dvUfzINdhgCPcBGAYYCw/s320/download-2062197_960_720.png";
}, 10000);
</script>
</body>
</html>
I am trying to create a program that generates random functions then shows them in LaTeX but I can't figure out how to edit LaTeX when a button is pressed.
This code works:
<html>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
</head>
<body>
<div lang="latex" id='Latexdiv'></div>
<script>
document.getElementById('Latexdiv').innerHTML = 'sin(x)';
</script>
</body>
</html>
But this does not:
<html>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
</head>
<body>
<div lang="latex" id='Latexdiv'></div>
<button onclick="change();">Change the LaTeX</button>
<script>
function change()
{
document.getElementById('Latexdiv').innerHTML = 'sin(x)';
}
</script>
</body>
</html>
I tried to use MathJax like this:
<html>
<body>
<button onclick='change();'>Change the LaTeX</button>
<div lang='latex' id='Latexdiv'></div>
<script type='text/javascript'>
var latexdiv = document.getElementById('Latexdiv');
function change()
{
var latex = document.createElement('script');
latex.src = 'http://latex.codecogs.com/latexit.js';
document.head.appendChild(latex);
var mathjax = document.createElement('script');
mathjax.src = 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML';
document.head.appendChild(mathjax);
latexdiv.innerHTML = '\\(sin(x)\\)';
};
</script>
</body>
</html>
This, unfortunately, only works the first time you press the button. If you press it twice, it just shows "\(sin(x)\)" in regular HTML. How would you get it to work twice?
http://latex.codecogs.com/latexit.js executes at the end:
LatexIT.add('*');
That adds and onload listener that executes a render function, that's why works in the first case, the page ends loading after your first script.
You could simply add the render function in your change function.
function change()
{
document.getElementById('Latexdiv').innerHTML = 'sin(x)';
LatexIT.render('*',false);
}
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