Onclick image not changing

Question

I want to click an image and change IMAGE to another image in my folder but that didn't work so I settled for a button but that's not doing what I want either. When I use the onclick the image does not change. It's for a project and embedded JS code will not be accepted so we have to put it into a separate file.

HTML:

    <!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <br>
        <div class="logo">
        <img src="logo.png" width="270" height="240">
        </div>
        <script src="functions.js"></script>
        <link rel="stylesheet" type="text/css" href="shirt.css">

    </head>
    <body>
    <br>
    <div class="scrollmenu">
    <nav class="navbar">
          <a href="shirt.html">Home</a>
          <a href="Shop.html">Shop</a>
          <a href="discounts.html">Discounts</a>
          <a href="feedback.html">Feedback</a>
    </div>
    </nav>
    </header>

    <br>
    <div class="t1">
    <h2 class="heading">CUSTOMISE YOUR SHIRT..</h2>
    <div class="customT1">
    <img id="IMAGE" src="t1.png" width="540" height="540"/><p>&euro;10.00</p>
    <p>Select one of the designs from below..</p>
    <img src="drift.png" width="140" height="140" border="2";/>
    <img src="clutch.png" width="140" height="140" border="2"/>
    <img src="jdm.png" width="130" height="140" border="2"/>
    <img src="twosik.png" width="140" height="140" border="2"/>
    </br>
    <button class="button" type="button" onclick= "alert();">USE</button>
</div>



</div>

    <br>
    <footer>
    <p>@Liam Chambers 2016</p>
    </footer>
</body> 

    enter code here

</html>

JS:

<script type ="text/javascript">

    function alert(){
    alert("hi");
    document.getElementById("IMAGE").src = "t1drift.png";
    }

</script>

Have you checked the console? What error message are you getting? Might I also suggest writing it in jQuery instead of vanilla JavaScript. — MCMXCII, Nov 19 '16 at 12:12
The problem is your choice of function name. `alert()` is already used. Try thinking of a different function name. I would also recommend only displaying the relevant source code when seeking help on StackOverFlow. — NewToJS, Nov 19 '16 at 12:13
@MCMXCII why on earth would adding a huge dependency such as jQuery be a benefit for such a simple operation as this?! — winseybash, Nov 19 '16 at 12:19
By using alert() as function name you are overriding the default browser `alert()` function. Your call to alert ends up in error (Max call Stack Size Exceeded, because `alert()` keeps calling itself) — kumardeepakr3, Nov 19 '16 at 12:20
Link:-http://stackoverflow.com/questions/6764961/change-an-image-with-onclick — Razia sultana, Nov 19 '16 at 14:15

score 0 · Answer 1 · answered Nov 19 '16 at 12:22

0

Try this

<button onclick="document.getElementById('IMAGE').src='t1drift.png'">USE</button>

answered Nov 19 '16 at 12:22

Anup S.

19
5

1

Introducing inline js code is bad practise. See: http://stackoverflow.com/questions/6941483/onclick-vs-event-handler – winseybash Nov 19 '16 at 12:28

score 0 · Answer 2 · answered Nov 19 '16 at 13:11

0

i suggest you to use jquery, it will be an simple solution to this

<script>
$(function(){
   function alert(){
      $("#IMAGE").attr('src','t1drift.png');
   }
});
</script>

answered Nov 19 '16 at 13:11

Karthick

281
2
7

Adding a large library such as jQuery for such a simple operation as this is completely unnecessary. – winseybash Nov 19 '16 at 13:14
i agree that. but in future if he wants to do any other higher operations means it will be useful at that moment – Karthick Nov 19 '16 at 13:17

score 0 · Answer 3 · edited May 23 '17 at 12:24

0

A question already answered there Change image when clicking button

Follow this link to get an idea. You can not use use built-in JS function for your function name. You should use unique function name.

edited May 23 '17 at 12:24

Community

1
1

answered Nov 19 '16 at 13:11

TPLMedia24

35
10

Please don't post answers that consist of links. If the links break in the future the answer becomes obsolete. – winseybash Nov 19 '16 at 13:16

score 0 · Answer 4 · answered Nov 19 '16 at 14:15

0

Try it:-

document["imgName"].src="../newImgSrc.jpg";

or

document.getElementById("imgName").src="../newImgSrc.jpg";

answered Nov 19 '16 at 14:15

Razia sultana

2,168
3
15
20

Onclick image not changing

4 Answers4