How to Change Image When Two Buttons Are Clicked

change multiple images in buttons

The first problem is that you've passed an argument to the function, which makes the dice variable available to that function, but because you wrapped that variable-name in quotes you're using the literal string 'dice' instead of the string that you passed in; so instead of:

var image = document.getElementById('dice');

you should, instead, use:

var image = document.getElementById(dice);

function pickDice(dice) {  var image = document.getElementById(dice);
  console.log(image.src)
  if (image.src.match("d4_grey.png")) {    image.src = "d4_green.png";  } else if (image.src.match("d4_green.png")) {    image.src = "d4_grey.png";  } else if (image.src.match("d6_grey.png")) {    image.src = "d6_red.png";  } else if (image.src.match("d6_red.png")) {    image.src = "d6_grey.png";  }}

<!-- note that I'm using HTML encoded ampersand instead of 'just' the     & character: --><h1>P&P System</h1><table>  <tr>    <td><button onclick="pickDice('d4_image')"><img id="d4_image" src="d4_grey.png" style="width:64px;"></button></td>    <td><button onclick="pickDice('d6_image')"><img id="d6_image" src="d6_grey.png" style="width:64px"></button></td>  </tr></table>

Javascript multiple image change with button clicks

There are several issues in your page: Missing document type declaration, missing title tag, actual content HTML in head and multiple body tags. In addition to these, changeImage() is replaced in every script with a new one. Finally there will be only the last function, which changes the src for #image2.

If I've understood your question correctly, you need something like this:

The script in the head:

function changeImage (element) {
    var n,
        imageData = [
            [
                {
                    src: "http://thechive.files.wordpress.com/2011/10/william-defoe.jpg",
                    caption: "Caption for image 1.1"
                },
                {
                    src: "http://cdn.memegenerator.net/images/300x/159304.jpg",
                    caption: "Caption for image 1.2"
                }
            ],
            [
                {
                    src: "http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg",
                    caption: "Caption for image 2.1"
                },
                {
                    src: "http://playerperspective.com/wp-content/uploads/2011/05/mike-tyson-3.jpg",
                    caption: "Caption for image 2.2"
                }
            ],
            [
                {
                    src: "http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master-chief-1.jpg",
                    caption: "Caption for image 3.1"
                },
                {
                    src: "http://static.guim.co.uk/sys-images/Technology/Pix/pictures/2012/3/5/1330958259135/Halo-4-007.jpg",
                    caption: "Caption for image 3.2"
                }
            ]
        ];
    if (element > -1) {
        document.getElementById('image' + element).src = imageData[element][1].src;
        document.getElementById('caption' + element).innerHTML = imageData[element][1].caption;
    } else {
        for (n = 0; n < imageData.length; n++) {
            document.getElementById('image' + n).src = imageData[n][0].src;
            document.getElementById('caption' + n).innerHTML = imageData[n][0].caption;
        }
    }
    return;
}

And the body:

<body>
    <button onclick="changeImage(-1);" >Click to restore all!</button>
    <div>
        <h1 id="caption0">Caption for image 1.1</h1>
        <button onclick="changeImage(0);">Click to change!</button>
        <img id="image0" src="http://thechive.files.wordpress.com/2011/10/william-defoe.jpg" />
    <div>
        <h1 id="caption1">Caption for image 2.1</h1>
        <button onclick="changeImage(1);">Click to change!</button>
        <img id="image1" src="http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg" />
    </div>
    <div>
        <h1 id="caption2">Caption for image 3.1</h1>
        <button onclick="changeImage(2);">Click to change!</button>
        <img id="image2" src="http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master-chief-1.jpg" />
    </div>
</body>

As you can see, the data for paths and captions is in the objects in nested array. This way they are separated from actual content, and the code is easier to maintain.

You didn't provide an example of the layout for the captions of the images, so I put caption information in H1 tags above the image. Feel free to change the element and its position. Notice, that you can also use HTML-tags within caption texts.

However, there are some limitations and waste of CPU-time when executing this code: imageData is created by every click and only two different paths can be used per element.

I'd suggest you to have more object-oriented approach to the task. Please take a look at this JSfiddle, which demonstrates quite similar functionality, and is more flexible and maybe easier to maintain.

How to change image of other buttons on onClick event?

Typed this out in notepad and tested.

It essentially searches for the string value buttonred and replaces it with buttonblue and vice versa.

<input type="image" id="start" src="buttonred.png" width="50px" height="50px" onClick="colorChange(this.id)"/>
<input type="image" id="stop" src="buttonred.png" width="50px" height="50px" onClick="colorChange(this.id)"/>
<input type="image" id="slow" src="buttonred.png" width="50px" height="50px" onClick="colorChange(this.id)"/>
<input type="image" id="fast" src="buttonred.png" width="50px" height="50px" onClick="colorChange(this.id)"/>

<script>

function colorChange(id) {
    var btn = document.getElementById(id);

    if (btn.src.match(/buttonred/gi) != null) {
        btn.src = btn.src.replace("buttonred.png","buttonblue.png");
    }
    else {
        btn.src = btn.src.replace("buttonblue.png","buttonred.png");
    }
}

</script>

Create 3 different buttons with each click displays new image

Do it like this way after removing the extra space from your <img src="" id="png" /> value ie. png to png otherwise it will cause TypeError: document.getElementById(...) is null

Also you can remove multiple functions to one like pic1(),pic2(),pic3() to pic(this) and based on the value of the button set the image src as you wish(I've used some online demo image for this example). Hope it helps :)

<script type="text/javascript">  function pic(param) {    if (param.value === 'Red Light') {      document.getElementById("png").src = "https://is5-ssl.mzstatic.com/image/thumb/Music71/v4/0f/79/15/0f79154d-fe37-001c-be03-51a29d458f22/source/1200x630bb.jpg";          } else if (param.value === 'Green Light') {      document.getElementById("png").src = "https://socialcare.blog.gov.uk/wp-content/uploads/sites/8/2013/12/green-traffic-light-md.png";          } else if (param.value === 'Yellow Light')  {      document.getElementById("png").src = "http://www.clker.com/cliparts/8/1/7/4/11949849782053089133traffic_light_yellow_dan_01.svg.med.png";    }    //console.log(param.value)
  }</script>
<img src="" id="png" style="width:30px; height:30px;" /><input type="button" value="Red Light" onclick="pic(this)" /><input type="button" value="Green Light" onclick="pic(this)" /><input type="button" value="Yellow Light" onclick="pic(this)" />

javascript or jquery change different Images on different button clicks

Simple as below,

<script type="text/javascript">
    $(function(){

        $('button').on('click',function(e){
            e.preventDefault();

            var imgSRC = $(this).data('src');

            $('#image').html('<img src="'+imgSRC+'" alt="Sample Image" />');
        });

    });
</script>

<button data-src="image1.jpg">One</button>
<button data-src="image1.jpg">Second</button>
<button data-src="image1.jpg">Third</button>
<button data-src="image1.jpg">Fourth</button>
<button data-src="image1.jpg">Fifth</button>

<div id="image"></div>

Working DEMO