0
    <!DOCTYPE HTML>
<HTML>

    <BODY>
    <h1>A452 Practical Investigation</h1>

    <button onclick="changeImage()">Automatic Traffic Lights</button>

    <IMG SRC="L1.jpg" name="L1">

        <SCRIPT LANGUAGE = "Javascript">
            var a1 = new Image();
            var a2 = new Image();
            var a3 = new Image();
            var a4 = new Image();

            a1.src="L1.jpg";
            a2.src="L2.jpg";
            a3.src="L3.jpg";
            a4.src="L4.jpg";

            var imgArray = new Array( a1, a2, a3, a4, a1);

                        var counter = 0;
            var end = imgArray.length - 1;

                        function changeImage() {



        </SCRIPT>

    </BODY>
</HTML>

Basically I'm having a few problems with my code i can't seem to be able to set up a button that allows the array to change the variables.

Thanks for the help.

1 Answer 1

0

I'm not sure if i've understood your question correctly, but here's my sujestion

 var a1 = new Image();
            var a2 = new Image();
            var a3 = new Image();
          
            a1.src="http://images.my-addr.com/img/exam_gif_to_png_q1.png";
            a2.src="http://simswiki.info/images/3/30/Windows_Logo.png";
            a3.src="http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211810400.png";

            var imgArray = new Array( a1, a2, a3);


                        function changeImage() {
           

           document.getElementById("array").innerHTML="old: 1: "+imgArray[0].src+"<br>2: "+imgArray[1].src;
     //change itself
     var a=imgArray[0].src;
     imgArray[0].src=imgArray[1].src;  
     imgArray[1].src=a;
     //endofchange
           document.getElementById("array").innerHTML+="<br>new: 1: "+imgArray[0].src+"<br>2: "+imgArray[1].src;            
                          
                        }
          
            function switchImage() {
              var index = imgArray.findIndex(function(elem){return elem.src==document.getElementById("host_im").getAttribute("src");})+1,num=imgArray.length;
            
              if(index==num)index=0;
              
              document.getElementById("host_im").src=imgArray[index].src;
                          
                        }
    <button onclick="changeImage()">change</button>
    <button onclick="switchImage()">switch</button>
  
    <IMG SRC="http://images.my-addr.com/img/exam_gif_to_png_q1.png" name="L1" id="host_im">
      <div id="array"></div>

If you want to change variable - it's as easy, as to define it. Just be sure, that variable is in the same scope, or it's global. Try changeImage() function.

Switch function is for changing image, that's shown. It findes src property for the img tag with id=host_im, findes index of element in js array and switches to the next one. Beware of identical links, cause function finds the first element with such src property.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.