0

the following is my code:

    <script>

        function changeImage(imgName)
        {
            image = document.getElementById('imgDisp');
            image.src = imgName;
        }

    </script>

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">

</head>

<body>
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" type="button" OnClick="changeImage'https://cdn.pbrd.co/images/1N3JpOlC.png'">Change Image</button>

    <br />

    <img id="imgDisp" src="https://cdn.pbrd.co/images/1N3JpOlC.png" />


</body>
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>

Please note that I am new to coding, so chances are the code looks messy and wrong. Anyway, I would like the button to have the style of material code which is the 'class' after the button

As well, as having an onclick function to change the image. I will have an image as a start, and every time changeimage is pressed it will change to one of four images in the order of an array. But below is just a test of using the changeImage with the material design button.

I'm not looking for it to get done for me, but instead, what methods should I take to fix it myself. Such as hints. Any help is appreciated, and once again. My code is not the clean, and I chances are I'm doing some fairly cringe worthy mistake.

Thank you.

Name not Found
  • 69
  • 2
  • 2
  • 10

2 Answers2

0

Try somethink like this:

       <img src="someInitUrl" onclick="changeImage(this)"/>

        <script type="text/javascript>
        //array that contains images
        var images[]
        var currentImage=0;

   function changeImage(img){
        img.src=images[currentImage];
        currentImage++;
        if(currentImage==images.length)
            currentImage=0;
        }
}
</script>

You can switch images with image number (currentIndex) and give image as argument to method. Of course you shold init you image array:

...
images=[];
images.push('http://...1');
images.push('http://...2');
images.push('http://...3');
...
alexey
  • 783
  • 1
  • 7
  • 19
0
<html>
<head>
<script>

        function changeImage()
        {
            image = document.getElementById('imgDisp');
            image.src = 'https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300';
        }

    </script>

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">

</head>

<body>
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" type="button" OnClick="changeImage();">Change Image</button>

    <br />

    <img id="imgDisp" src="https://cdn.pbrd.co/images/1N3JpOlC.png" />

<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
</body>
</html>

This should work.

The below code is for the exact requirement that you have.

<!doctype html>
<html lang="en">
<head>
<script>

        function changeImage(imageName)
        {
            image = document.getElementById('imgDisp');
            //image.src = 'https://cdn.pbrd.co/images/1N3JpOlC.png';
            image.src = imageName;
        }

    </script>

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">

</head>

<body>
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" type="button" OnClick='changeImage(&quot;https://cdn.pbrd.co/images/1N3JpOlC.png&quot;);'>Change Image</button>

    <br />

    <img id="imgDisp" src="" />

<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
</body>
</html>

I got hint from following link as I knew that it is a problem of single quote escape of Javascript.

How to escape a single quote ( ' ) in JavaScript?

Community
  • 1
  • 1
Hiren Rathod
  • 946
  • 1
  • 7
  • 21
  • Thanks for the help, got the image to successfully change. But one more question, how could I get the button to go through a total of four different images and then go back to the first one. So for example's sakes it starts with one.png, then it goes to two.png, then it goes to three.png, then it goes to four.png. All with the same button. – Name not Found Feb 26 '16 at 22:56
  • You can write if condition for each image in the function and compare which `imageName` is there so that you can pass new png url accordingly. Let me know if any other detail are required. – Hiren Rathod Feb 27 '16 at 11:35
  • I mean `if(imageName == 'https://cdn.pbrd.co/images/1N3JpOlC.png')` `{` `image.src = 'some_specific_url';` `}` like this all 4 conditions. – Hiren Rathod Feb 29 '16 at 13:46
  • I think you need to change in the function `changeImage` itself. Still if you are not getting idea, provide whole code and let us know the query. – Hiren Rathod Mar 01 '16 at 06:54
  • function changeImage(imageName) { image = document.getElementById('imgDisp'); if(imageName == 'redon.png') { image.src = 'redandamberon.png'; } if(imageName == 'redandamberon.png') { image.src = 'redon.png'; } if(imageName == 'greenon.png') { image.src = 'amber.png'; } } This should work. – Hiren Rathod Mar 01 '16 at 07:10
  • Try to put whole url for all images. – Hiren Rathod Mar 01 '16 at 07:17
  • You have defined function changeImage twice which is not proper. I think you should start with some basics. Use tutorial of javascript and jquery and some basic programming which would help you to identify such problems. – Hiren Rathod Mar 01 '16 at 08:42
  • You should put first image link there, further it would automatically take it if you give full url of image in the function. – Hiren Rathod Mar 01 '16 at 13:23
  • [http://pastebin.com/L3cVjpvS](http://pastebin.com/L3cVjpvS) Please have a look. keep images in the same folder as `php/html` file – Hiren Rathod Mar 02 '16 at 13:14