I have a script that places an image based on a mouse click thanks to Jose Faeti. Now I need help adding a .click() event to the code below so that when a user clicks the image it performs the function shown in the script.
.click()
.click()
Any reason you’re not just using jQuery? In any case, you’re creating a DOM element for the image—adding a listener to that is the same as adding a listener to any other DOM element—which you already know how to do.
4 Answers 4
.click()
You’re mixing HTML and JavaScript. It doesn’t work like that. Get rid of the .click() there.
If you read the JavaScript you’ve got there, document.getElementById(‘foo’) it’s looking for an HTML element with an ID of foo . You don’t have one. Give your image that ID:
Alternatively, you could throw the JS in a function and put an onclick in your HTML:
I suggest you do some reading up on JavaScript and HTML though.
The others are right about needing to move the above the JS click binding too.
I’m trying to make an image swapper (click smaller image and it changes the image in a larger area of the screen). But I am getting the variable imgSrc as undefined. I believe this is because I am not getting the source for the specific image being clicked.
var imgSrc = document.getElementsByClassName('avatar-small').src; console.log("img Src avatar-small" onclick="selectAvatar()" src="https://stackoverflow.com/questions/22723414/images/avatars/1.png">
How can I make use of something using .this so I am actually getting the source from the image that is clicked? The console log outputs:
function selectAvatar(this)
javascripthtml
)" data-controller="se-share-sheet" data-se-share-sheet-title="Share a link to this question" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="question" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="1" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f3.0%2f" data-se-share-sheet-license-name="CC BY-SA 3.0" data-s-popover-placement="bottom-start">Share
I think you must pass a reference of the current element this, to your selectAvatar function, like:
function selectAvatar(el) < var imgSrc = el.src; console.log("img Src http://jsfiddle.net/IrvinDominin/RpP7h/" rel="nofollow">http://jsfiddle.net/IrvinDominin/RpP7h/
)" data-controller="se-share-sheet" data-se-share-sheet-title="Share a link to this answer" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="answer" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="2" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f3.0%2f" data-se-share-sheet-license-name="CC BY-SA 3.0" data-s-popover-placement="bottom-start">Share
What I need to do is have a function which gets the img src value of the myfunction passed parameter. So for example:
4 Answers 4
You can pass this as a parameter to the function which will be a reference to the clicked div element. You can then get the child img and read the src attribute.
However a much better solution would be to use unobtrusive event handlers over outdated on* event attributes. Try this:
Onlcick of respective divs image src can be get using var imgSrc = "assets/placeholders/sliders/slider" + id + ".png"; and it can be used as per need.
Please check working snippet.
Add an id attribute to your img tags and give them your id parameter.
In your script you can fetch them with jQuery.
However, there multiple ways to achieve this.
Using onclick attribute you can pass this keyword in myfunction which represents the current element, and then look for the src attribute.
Even though you can achieve the desired outcome, this way of using onclick attributes for Javascript is not a good practice. Javascript developers recommend you should always put javascript entirely in a separate file.
I would like to change my img source when I click on the img. (When I click on img1 I want to see img2. When I click on img2 I want to see img3. Etc.) I've checked many post before posting myself. Many of them offer the same answer. This is my code :
ROADTRIP
Also you should not store your data in the DOM. Store the image source addresses into a JS array, and keep book of the index for showing images.
5 Answers 5
Here is working code, use .src not .setAttribute .
getAttribute just return value, not point to src, it gets a clone of src. If you change the clone, the original is not changed.
As I said in a comment, you should not store your data in the DOM. Doing so is overly complex, a nightmare to maintain and dead slow to execute. Instead, store the image addresses into a JS array, and keep book of the index for showing images, something like this:
In the HTML, pass the event object: onclick="clickimg(event)" , or rather add the event listener in the script:
const imgs = [ 'img/image1.jpg', 'img/image2.jpg', 'img/image3.jpg' ]; let index = 0; document.getElementById('roadtrip').addEventListener( 'click', clickimg // If you'll do this, remove the onclick attribute from the img tag ); function clickimg (e) < e.target.src = imgs[index]; // Change the src of the clicked image index = ++index % imgs.length; // Increase index, shows the first image when the length of the array is reached >
This way the image addresses are easy to maintain, if you need more images, just add an address to imgs array. Or you can change or remove some of the images just by manipulating the array.
Thanks Ben. This does not seem to work with a data:URL. Do you know whether it is possible to open a data:URL image in a new window?
Developers also take care about accessibility.
Do not use onClick on images without defining the ARIA role.
Non-interactive HTML elements and non-interactive ARIA roles indicate content and containers in the user interface. A non-interactive element does not support event handlers (mouse and key handlers).
The developer and designers are responsible for providing the expected behavior of an element that the role suggests it would have: focusability and key press support. More info see WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets.
tldr; this is how it should be done:
I think your error was in calling the function.
In your HTML code, onclick is calling the image() function. However, in your script the function is named imgWindow() . Try changing the onclick to imgWindow() .
I don't do much JavaScript so if I have missed something, please let me know.
Image Modal
In this example, we use CSS to create a modal (dialog box) that is hidden by default.
We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.
× // Get the modal var modal = document.getElementById("myModal"); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementById("myImg"); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function() < modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; >// Get the element that closes the modal var span = document.getElementsByClassName("modal")[0]; // When the user clicks on (x), close the modal span.onclick = function()
.click()
.click()
