Change img src by JavaScript without having onclick in HTML

Question

I am new to JavaScript and I need a JavaScript code that will change the image src to "next.png" when someone clicks the element with class "fancybox-close". Unfortunately, I can't do it simply by adding an "onclick" event to the "a" tag because the HTML code bellow is generated by JQuery and that's unknown for me. I have inspected this HTML by Firebug and so the class "fancybox-close" is the only thing I can use.

The HTML of element where I want to change the SRC (this I can change). The SRC of the image has been previously changed by other JavaScript code where I was able to use onclick (opening of the photo gallery) - that works. Now I want to change it again under different circumstates as explained above.

<img src="" alt="Next button" name="nextbutton" class="buttonimage" />

Code of the gallery that I can't change (inspected with Firebug):

<a class="fancybox-item fancybox-close" href="javascript:;" title="Close">

My JavaScript. I don't know how to attach document.getElementsByClassName to the document.images.XXX.src in order to make the code working.

var close = document.getElementsByClassName("fancybox-close").onclick;
document.images.nextbutton.src = "../../images/next.png";

Thank you.

did you try: document.getElementsByClassName("buttonimage").src="../../images/next.png"; — jeremy castelli
– jeremy castelli, Commented Jan 17, 2015 at 23:33
No I don't know how to use jQuery. I haven't tried document.getElementsByClassName("buttonimage").src="../../images/next.png", tried now, thanks, through what is the "buttonimage"? Class of the element (didn't work to place it there), Image src or name of the element or something different? Or should it stay how it is (also tried)? — nickname display none
– nickname display none, Commented Jan 17, 2015 at 23:50

Rodion · Accepted Answer · 2015-01-17 23:30:13Z

1

If you use jQuery you could just try:

$('.fancybox-close').click(function () { $('[name=nextbutton]').attr('src', "../../images/next.png"); })

otherwise something like this:

var element = document.getElementsByClassName("fancybox-close")[0]; element.addEventListener('click', function() { document.images.nextbutton.src = "../../images/next.png"; });

answered Jan 17, 2015 at 23:30

Rodion

5312 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nickname display none Over a year ago

Thank you, I tried both codes but they don't work on my site.

Rodion Over a year ago

be sure that code invoked after jquery generate all html

nickname display none Over a year ago

Good idea. The jQuery creates the photo gallery just after a site visitor clicks the gallery button. I tried to attach your code to "onclick" to a button brings up the gallery but without success.

Schien · Accepted Answer · 2015-01-18 01:36:27Z

0

<script>
    var os=document.getElementsByTagName('img');
    for (var i=0;i<os.length;i++){
        var o=os[i];
        if (o.className=='buttonimage'&&o.name=='nextbutton') {
            o.onclick=function(){o.src='../../images/next.png';}
        }
    }
</script>

There's no native getElementsByClassName function in JavaScript but you can easily traverse the DOM tree.

answered Jan 18, 2015 at 1:36

Schien

3,9231 gold badge20 silver badges29 bronze badges

Collectives™ on Stack Overflow

Change img src by JavaScript without having onclick in HTML

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related