This code works when loaded in Firefox, but does not work in IE8. In IE8, clicking the link has no effect.
I would appreciate any pointers on how to make it work in IE.
<html>
<head>
<title>RG</title>
</head>
<script type="text/javascript">
var rightTarget;
var leftTarget;
var index = 516;
var img;
function rightLinkClicked(e) {
rightTarget = e.target;
rightTarget.style.color = "green";
if (index < 547) {
index = index +1;
img=document.getElementById("img");
img.src="pics/IMG_0" + index + ".JPG";
} else {
alert ("This is the last painting");
}
}
function leftLinkClicked(e) {
leftTarget = e.target;
leftTarget.style.color = "red";
rightTarget.style.color = "black";
if (index >516) {
index = index -1;
img=document.getElementById('img');
img.src="pics/IMG_0" + index + ".JPG";
} else {
alert ("This is the first painting");
}
}
function addListeners() {
var rightLink = document.getElementById("rightlinkid");
rightLink.addEventListener('click', rightLinkClicked, false);
var leftLink = document.getElementById("leftlinkid");
leftLink.addEventListener('click', leftLinkClicked, false);
}
window.addEventListener('load', addListeners, false);
</script>
</head>
<body>
<h2>RG</h2>
<div>
<a id="leftlinkid">Previous
<img src="icons/left.gif" ;="" alt="left arrow" title="">
</a>
</div>
<div id="myimg">
<img id="img" src="pics/IMG_0516.JPG" ;="" alt="start arrow" title=""width="640"height="480">
</div>
<div>
<a id="rightlinkid">Next
<img src="icons/right.gif" ;="" alt="right arrow" title="">
</a>
</div>
<p>© 2011 RG</p>
</body>
</html>
IE uses attachEvent instead of addEventListener.
You may want to use a cross-browser Javascript library such as jQuery to handle these issues (and many more) for you.
Related
Forgive me, it's been a while since figuring out anything with jQuery, I need some guidance/help: I'd love to swap an image 00x-a for 00x-b, but not just for a single image, but for many. Once the BTN below an IMG is clicked, I'd love to swap the IMG above for 00x-b while resetting other IMGs to 00x-a.
<div>
<img id="swap_this" src="img-001-a.jpg">
<a class="button">Change-IMG</a>
</div>
<div>
<img id="swap_this" src="img-002-a.jpg">
<a class="button">Change-IMG</a>
</div>
<div>
<img id="swap_this" src="img-003-a.jpg">
<a class="button">Change-IMG</a>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".button").click(function(){
$("#swap_this").attr()({
"src":"img-001-b.jpg";
})
})
});
</script>
This should do it. Only the first picture is set to img-001-a.jpg
var arr = ['img-001-a.jpg', 'img-002-a.jpg', 'img-003-a.jpg']
$.each($('.swap_this'), function(index, value) {
if(index == 0) {
$(this).attr('src', arr[0])
console.log($(this).attr('src'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img class="swap_this" src="img-001-b.jpg">
<a class="button">Change-IMG</a>
</div>
<div>
<img class="swap_this" src="img-002-b.jpg">
<a class="button">Change-IMG</a>
</div>
<div>
<img class="swap_this" src="img-003-b.jpg">
<a class="button">Change-IMG</a>
</div>
Tried to follow up on your answer, but ended up with something else. The below does what I need, but can it be written with "each" or using a for-loop to iterate through? Thx.
// clicking btn_100
$('.btn_100').click(function(e) {
// reset all IMG to version -a.gif..
$(".img_100").attr('src','img-100-a.gif');
$(".img_099").attr('src','img-099-a.gif');
$(".img_098").attr('src','img-098-a.gif');
// set IMG_100 ver -b.gif..
$(".img_100").attr('src','img-100-b.gif');
});
// clicking btn_099
$('.btn_099').click(function(e) {
// reset all IMG to version -a.gif..
$(".img_100").attr('src','img-100-a.gif');
$(".img_099").attr('src','img-099-a.gif');
$(".img_098").attr('src','img-098-a.gif');
// set IMG_100 ver -b.gif..
$(".img_099").attr('src','img-099-b.gif');
});
// and so on..
Maybe this could work…
for(a=1; a<=100; a++) {
// create fns for all btns
$(".btn_" + a).click(function(e) {
// reset all IMG to version -a.gif..
for(i=1; i<=100; i++) {
$(".img_" + i).attr("src","image-" + i + "-a.gif");
}
// set specific IMG to version -b.gif..
$(".img_" + a).attr("src","image-" + a + "-b.gif");
});
}
I've tried to fix this problem for the past 1 hour without success. Basically, once I reach "imageB", I have to click 1 extra time before the image resets back to "imageA". I don't understand why this is happening. Any assistance will be greatly appreciated:
HTML:
<body>
<div class="main-container">
<div class="image-div">
<img width="500px" id="image-holder" src="images/imageA.jpeg" alt="" />
</div>
<button onclick="nextImage()">Next</button>
</div>
<script src="index.js"></script>
</body>
JS:
let imageHolder = document.getElementById("image-holder");
let images = ["images/imageA.jpeg", "images/imageB.jpeg"];
let i = 1;
function nextImage() {
if (i < images.length) {
imageHolder.setAttribute("src", images[i]);
i++;
} else {
i = 0;
}
}
I made a code which can solve your problem, but I think it's a little long, maybe you can find a code more readable on more short than my, anyway here is my solution and it works for me:
everytime when you click in the button, the function give the next item in the array (next source), but if the item is in the end of the array he start again by the first item in the array.
<div class="main-container">
<div class="image-div">
<img width="500px" id="image-holder" src="./img1.png" alt="" />
</div>
<button onclick="nextImage()">Next</button>
</div>
let imageHolder = document.getElementById("image-holder");
let images = ["./img1.png", "./oz.png","./img2.png"];
function nextImage() {
let getSrcAttr = imageHolder.getAttribute("src");
let newSrc =
imageHolder.setAttribute("src",images[(images.indexOf(getSrcAttr))+1]);
if(images.indexOf(getSrcAttr) == (images.length)-1){
newSrc = imageHolder.setAttribute("src",images[0]);
}
}
I am trying to make a script that will take the images from one div element and put it to div rndmImage randomly on button click, I should see images when document is loaded, but the new div where images should go after click must be empty until click heapends. And I need only JavaScript, no jQuery, alse i can not change the html, and it has to work for any number of images. So if you have some ideas that would be great. Here's my code.
window.addEventListener('load', start, false);
function start() {
var butt = document.getElementsByTagName('button')[0];
var rnImg = document.getElementsByClassName('ekran');
var pictures = document.getElementsByTagName('img');
var choose = Math.floor(Math.random()*pictures.length);
butt.addEventListener('click', menjaj, false);
function menjaj(e) {
var new = e.button;
var img = [];
for(var i = 0; i< pictures.length; i++) {
var dodaj = img[i];
img.push(dodaj);
}
//ekran.src = 'slike/' + slike[izbor] + '.jpg';
}
}
<body>
<div class="wrapper">
<div>
<img src="slike/leto1.jpg" alt="leto1">
<img src="slike/leto2.jpg" alt="leto2">
<img src="slike/leto3.jpg" alt="leto3">
<img src="slike/leto4.jpg" alt="leto4">
<img src="slike/leto5.jpg" alt="leto5">
<img src="slike/leto6.jpg" alt="leto6">
<img src="slike/leto7.jpg" alt="leto7">
<img src="slike/leto8.jpg" alt="leto8">
<img src="slike/leto9.jpg" alt="leto9">
</div>
<div>
<button type="button">choose</button>
</div>
<div class="rndmImage"></div>
</div>
</body>
This is a working snippet of your code:
window.addEventListener('load', start, false);
function start () {
var butt = document.getElementsByTagName('button')[0];
var rnImg = document.getElementsByClassName('rndmImage')[0]; //Change selector to existing class and select the first (the only) one
var pictures = document.getElementsByTagName('img');
butt.addEventListener('click', menjaj, false);
function menjaj (e) {
// var new = e.button;// 'new' is reserved word in JS, you can't use it as variable name
// var btn = e.button;// but this line is useless
var choose = Math.floor(Math.random() * pictures.length); //better move this line inside this function to get rundom image every button clicks
var img = document.createElement('img'); //creates new img tag
img.src = pictures[choose].src;
rnImg.innerHTML = ''; //to delete previous image
rnImg.appendChild(img);
// var img = []; //useless lines of code
// for(var i = 0; i< pictures.length; i++) {
// var dodaj = img[i];
// img.push(dodaj);
// }
//ekran.src = 'slike/' + slike[izbor] + '.jpg';
}
}
welcome to StackOverflow!
I would first hide the .wrapper > div img as that will prevent the images to show, then, append a data-pos to help select the position and simply randomize them and pick the src to show on the placeholder
and remember that you have a <div> as placeholder, so you can't assign src, only if you change it to <img>
so, something like this 😊
function chooseImg() {
// get total images available
var totalImages = document.querySelectorAll('.wrapper > div img').length
log('totalImages', totalImages)
// get a random position
var rndPosition = Math.floor(Math.random() * totalImages)
log('rndPosition', rndPosition)
// get hold of the image for such position
var rndImage = document.querySelector('.wrapper > div img[data-pos="' + rndPosition + '"]')
log('rndImage', rndImage)
// assign the source to the DIV
document.querySelector('.rndmImage').style = 'background-image: url("' + rndImage.src + '")'
}
function log(txt, obj) {
console.log(txt, obj)
}
.wrapper > div img {
display: none;
}
.rndmImage {
background-size: contain;
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
<div class="wrapper">
<div>
<img data-pos="0" src="https://randomwordgenerator.com/img/picture-generator/54e5d2434953a514f1dc8460962e33791c3ad6e04e507440742f7cd09645cc_640.jpg" alt="leto1">
<img data-pos="1" src="https://randomwordgenerator.com/img/picture-generator/54e2d1404a57a814f1dc8460962e33791c3ad6e04e5074417c2d78d19f44c4_640.jpg" alt="leto2">
<img data-pos="2" src="https://randomwordgenerator.com/img/picture-generator/57e2d5444851a414f1dc8460962e33791c3ad6e04e50744172287ad2914fc4_640.jpg" alt="leto3">
<img data-pos="3" src="https://randomwordgenerator.com/img/picture-generator/51e8d0444f56b10ff3d8992cc12c30771037dbf85254794e722c73d19245_640.jpg" alt="leto4">
<img data-pos="4" src="https://randomwordgenerator.com/img/picture-generator/53e4d2464a56a914f1dc8460962e33791c3ad6e04e507440722d7cd39345c1_640.jpg" alt="leto5">
<img data-pos="5" src="https://randomwordgenerator.com/img/picture-generator/57e9dc434b5ba414f1dc8460962e33791c3ad6e04e50744172297bd5934cc4_640.jpg" alt="leto6">
<img data-pos="6" src="https://randomwordgenerator.com/img/picture-generator/55e1dc4b4254ad14f1dc8460962e33791c3ad6e04e507440722d72d09249c7_640.jpg" alt="leto7">
<img data-pos="7" src="https://randomwordgenerator.com/img/picture-generator/57e9d4474e54a814f1dc8460962e33791c3ad6e04e50744172297cdd974cc0_640.jpg" alt="leto8">
<img data-pos="8" src="https://randomwordgenerator.com/img/picture-generator/53e6dc404951b10ff3d8992cc12c30771037dbf852547848702e7ed19348_640.jpg" alt="leto9">
</div>
<div>
<button type="button" onclick="chooseImg()">choose</button>
</div>
<div class="rndmImage"></div>
</div>
<div class="wrapper">
<img src="../Assets1/Image/1.svg" alt="" />
<img src="../Assets1/Image/2.svg" alt="" />
<img src="../Assets1/Image/3.svg" alt="" />
</div>
<button>Click</button>
<div class="randomImageContainer"></div>
const button = document.querySelector('button');
button.addEventListener('click', randomImage);
function randomImage() {
const image = document.querySelectorAll('.wrapper > img');
const randomImageContainer = document.querySelector('.randomImageContainer');
let randomNumber = Math.floor(Math.random() * image.length);
const img = document.createElement('img');
img.src = image[randomNumber].src;
randomImageContainer.appendChild(img);
}
You can do this with plain javascript like this:
document.querySelector("button").addEventListener("click", () => {
var imgElements = document.querySelectorAll(".wrapper img");
document.querySelector(".rndmImage").innerHTML = imgElements[Math.floor(Math.random() * imgElements.length)].outerHTML;
});
<div class="wrapper">
<div>
<img src="slike/leto1.jpg" alt="leto1">
<img src="slike/leto2.jpg" alt="leto2">
<img src="slike/leto3.jpg" alt="leto3">
<img src="slike/leto4.jpg" alt="leto4">
<img src="slike/leto5.jpg" alt="leto5">
<img src="slike/leto6.jpg" alt="leto6">
<img src="slike/leto7.jpg" alt="leto7">
<img src="slike/leto8.jpg" alt="leto8">
<img src="slike/leto9.jpg" alt="leto9">
</div>
<div>
<button type="button">choose</button>
</div>
<div class="rndmImage"></div>
</div>
If you're able to use randojs, you can even simplify the randomness and make it all cryptographically secure like this:
document.querySelector("button").addEventListener("click", () => document.querySelector(".rndmImage").innerHTML = rando(document.querySelectorAll(".wrapper img")).value.outerHTML);
<script src="https://randojs.com/2.0.0.js"></script>
<div class="wrapper">
<div>
<img src="slike/leto1.jpg" alt="leto1">
<img src="slike/leto2.jpg" alt="leto2">
<img src="slike/leto3.jpg" alt="leto3">
<img src="slike/leto4.jpg" alt="leto4">
<img src="slike/leto5.jpg" alt="leto5">
<img src="slike/leto6.jpg" alt="leto6">
<img src="slike/leto7.jpg" alt="leto7">
<img src="slike/leto8.jpg" alt="leto8">
<img src="slike/leto9.jpg" alt="leto9">
</div>
<div>
<button type="button">choose</button>
</div>
<div class="rndmImage"></div>
</div>
Try this:
this is my image in HTML file
<snap id="image" class="btn btn-warning" onclick="changeImage()">Image</snap>
<image id="imagechange" src="https://picsum.photos/200/300" ></image>
my javascript file
imgcount = 0;
function changeImage() {
document.getElementById("imagechange").src =
"https://picsum.photos/200/" + (300 + imgcount);
imgcount++;
}
everytime you click button you get a new image
Using Javascript, I want to toggle on and off between 2 images.
So far I am using a counter and then changing my innerHTML based off if the counter is even or odd for when the image is clicked
It works the first time i click the image by replacing the image already there, but after the first time it keeps on adding images instead.
How can i make it change the image after the second time rather than add images when I click?
<!DOCTYPE html>
<html>
<head>
<script>
var x = 0;
function myFunction() {
x++;
var div1 = document.getElementById('div1');
if (x % 2 != 0) {
var y = document.write('<img src="http://www.computric.com/wp-content/uploads/2011/09/119709197585381818TzeenieWheenie_Power_On_Off_Switch_red_2.svg_.med_.ng" alt="sometext" onclick=myFunction()>');
div1.appendChild.innerHtml = y;
} else if (x % 2 == 0) {
var y = document.write('<img src="http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg" alt="some_text" onclick=myFunction()>')
div1.appendChild.innerHTML = y;
}
}
</script>
</head>
<body>
<div id="div1" style="font-size:12px" onclick=myFunction()> <span onclick=myFunction()>
<img src="http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg" alt="some_text">
</span>
</div>
</body>
</html>
If you are only trying to achieve the toggle effect something like this should work:
<!DOCTYPE html>
<html>
<head>
<script>
var x=0;
function myFunction(){
var div1=document.getElementById('div1');
if(x==0){
x=1;
document.getElementById("myimgid").src = "http://www.computric.com/wp-content/uploads/2011/09/119709197585381818TzeenieWheenie_Power_On_Off_Switch_red_2.svg_.med_.ng";
}
else{
x=0;
document.getElementById("myimgid").src = "http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg";
}
}
</script>
</head>
<body>
<div id="div1" style="font-size:12px" onclick=myFunction()>
<span>
<img id="myimgid" src="http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg" alt="some_text">
</span>
</div>
</body>
</html>
Basically, for this snippet of code, I would like to get the picture to show when clicked on, as shown by my onmousedown function. But for some reason, when I click on the picture, it does not show the picture that I have called in my server() function. In addition to that, my counters (the buttons) do not work as they are supposed to (add and subtract).
<!-- HTML header and stylesheets -->
memory = 0;
hdd = 0;
usb = 0;
server = "";
function allInOne()
{
document.getElementById("memory").innerHTML = memory;
document.getElementById("hdd").innerHTML = hdd;
document.getElementById("usb").innerHTML = usb;
}
function server();
{
div = document.getElementById("server");
div.innerHTML = "<img src = 'server1.png' />";
}
<!-- omitted some HTML -->
<span> Memory (GB) <span>
<button onmousedown="allInOne();memory++">+</button>
<article id = "memory">0</article>
<button onmousedown="allInOne();memory--">-</button>
<br />
<span> HDD (GB) </span>
<button onmousedown="allInOne();hdd++">+</button>
<article id = "hdd">0</article>
<button onmousedown="allInOne();hdd--">-</button>
<br />
<span> USB Ports </span>
<button onmousedown="allInOne();usb++">+</button>
<article id = "usb">0</article>
<button onmousedown="allInOne();usb--">-</button>
<br />
<span class = "button" onmousedown="mac"> Mac OS X </span>
<span class = "button" onmousedown="linux"> Linux </span>
<span class = "button" onmousedown="windows"> Windows </span>
<br />
<img src = "server1.png" onmouseover="server();" />
<img src = "laptop.jpg" />
<img src = "0009-03_lenovo_pc.jpg"/>
<!-- some more HTML below -->
If anyone could help it would be greatly appreciated.
Okay here you go.
<script type = "text/javascript">
memory = 0;
hdd = 0;
usb = 0;
server = "";
function allInOne()
{
document.getElementById("memory").innerHTML = memory;
document.getElementById("hdd").innerHTML = hdd;
document.getElementById("usb").innerHTML = usb;
}
function server1()
{
var div_server = document.getElementById("server");
div_server.innerHTML = "<img src = 'i_icon.gif' />";
}
</script>
removed a ; which was present after function server()
renamed the method to server1() since a variable is there named server.
change closing tag <span> to </span>
moved all the ++ and -- operation before calling the methid allInOne().
changed all the event to onclick. I have used a different image from system.
and it working fine. please test now
It's better and more efficient to add event listeners from your javascript. Every onmousedown, onclick etc. triggers an eval action. There are 2 ways to add an event listener to a HTML element: [element].on[action] = [some function] or using the addEventListener/attachEvent method of a html element.
Have a look at this jsfiddle example to see if you can apply that to your code
Try the following
<!DOCTYPE html>
<html>
<head>
<title> Javascript </title>
<link rel = "stylesheet" type = "text/css" href = "css.css">
<script type = "text/javascript">
memory = 0;
hdd = 0;
usb = 0;
server = "";
function allInOne()
{
document.getElementById("memory").innerHTML = memory;
document.getElementById("hdd").innerHTML = hdd;
document.getElementById("usb").innerHTML = usb;
}
function server()
{
div = document.getElementById("server");
div.innerHTML = "<img src = 'server1.png' />";
}
function changeText(id)
{
if(id == 'mac')
{
txt = document.getElementById("mac");
txt.innerHTML = "mac";
}
else if(id =='linux' )
{
txt = document.getElementById("linux");
txt.innerHTML = "linux";
}
else
{
txt = document.getElementById("windows");
txt.innerHTML = "windows";
}
}
</script>
</head>
<body>
<div>
<span> Memory (GB) <span>
<button onmousedown="allInOne();memory++">+</button>
<article id = "memory">0</article>
<button onmousedown="allInOne();memory--">-</button>
<br />
<span> HDD (GB) </span>
<button onmousedown="allInOne();hdd++">+</button>
<article id = "hdd">0</article>
<button onmousedown="allInOne();hdd--">-</button>
<br />
<span> USB Ports </span>
<button onmousedown="allInOne();usb++">+</button>
<article id = "usb">0</article>
<button onmousedown="allInOne();usb--">-</button>
<br />
<span class = "button" onmousedown="changeText(this.id);" id="mac"> Mac OS X </span>
<span class = "button" onmousedown="changeText(this.id);" id="linux"> Linux </span>
<span class = "button" onmousedown="changeText(this.id);" id="windows"> Windows </span>
<br />
<img src = "server1.png" onmouseover="server();" />
<img src = "laptop.jpg" />
<img src = "0009-03_lenovo_pc.jpg"/>
<br />
<div id = "server"></div>
</div>
</body>
</html>
You did one mistake while declaring the function with ; like the following
function server();
{
}
You need to remove the semicolon currently on the end of the line:
function server();
Regarding the buttons: you don't actually say what is wrong with your add/subtract button behaviour but I'm guessing the problem is that you update the display first via the allInOne() function and then increment or decrement after that.
Instead of saying:
onmousedown="allInOne();memory++"
Try:
onmousedown="memory++;allInOne();"
// or, unless you have a specific reason for using mousedown rather than click
onclick="memory++;allInOne();"