单击提交按钮后如何更改图像？

Question

I want a code for questionnaire. with each question answered (text format) image change with the click of submit and progress bar increase.

I have to change 3 things with one click.

1. question
2. image
3. progress bar

<script>
    var img_array = ['placehold.it/100x100/green';, 'placehold.it/100x100/blue';, 'placehold.it/100x100/red']; 
    i = 0; 
    function myFunction() { 
        i++; 
        document.getElementById("myImg").src = img_array[i]; if (i == img_array.length - 1) { i = -1; } 
    }
</script>

Answer 1

If you want to change the image for image then this is the sample

document.getElementById('theImage').src="image.png";

If you want to change the background image of a button then this is the sample

document.getElementById("button").style.backgroundImage = "url('http://image/1917/crossn.png')";
button.style.backgroundRepeat = "no-repeat";

Answer 2

I have to change 3 things with one click. question image progress bar

Sample html code:

<div id="myQuestion">Qeuestion1</div>
<img src="test" id="myImg" /><br/>
<progress id="progressId" value="0" max="100"></progress><br/>
<button id="buttonId" onClick="myFunction()">submit</button>

Sample javascript code:

$(document).ready(function(){
var qus_array = ['Question1','Question2','Question3']
var img_array = ['placehold.it/100x100/green', 'placehold.it/100x100/blue', 'placehold.it/100x100/red']; 
var i = 0; 
     $('button').click(function(){
         i++; 
         document.getElementById("myQuestion").innerHTML = qus_array[i];
        document.getElementById("myImg").src = img_array[i]; 
         document.getElementById("progressId").value = 33*i; 
         if (i == img_array.length - 1) { i = -1; } 
     })
 });

See the JSFiddle