Home Onclick event not working properly
Reply: 0

Onclick event not working properly

user5451
1#
user5451 Published in April 24, 2018, 8:31 am

Basically I am trying to use an onclick event to change an image source when image 2 button is clicked. When the image furthest right of the section is clicked, a modal will pop up. In that modal, there are two buttons down at the bottom. Image one button is intended to display the original image, and image two is intended to display a different image. Not sure what is wrong in my code, I can't see anything that I am forgetting. Or maybe I am just doing it completely wrong in the first place, help would be much appreciated.

.mDialogPhoto {
        width: 95%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .modal-body {
        padding: 0px;
    }
    .modal-backdrop.in {
        opacity: 0.8;
    }
    .modal-content {
        background-color: white;
    }
    .img-responsiveModal {
        margin-top: 20px;
        margin-bottom: 20px;
        display: block;
        width: 100%;
        height: auto;
    }
    .modal-dialog {
        margin-top: 50px;
    }

<section class="contentThree">
    <div class="container-fluid custom">
        <div class="row">
            <div class="col-md-12 hidden-xs hidden-sm">
                <h2 class="text-center photographyTitle">Shop</h2>
            </div>

<!-- Modal -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog mDialogPhoto" role="document">
    <div class="modal-content">
      <div class="modal-body">
          <div class="container-fluid">
              <div class="row">
                  <div class="col-sm-6 modal3ImgPrev">
                        <img class="img-responsiveModal" id="myImg" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'/>
                  </div>
                    <div class="paypal col-md-3">
                        <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
                    <input type="hidden" name="cmd" value="_s-xclick">
                    <input type="hidden" name="hosted_button_id" value="D9FWAKHUPWYXS">
                    <table>
                    <tr><td><input type="hidden" name="on0" value="Choose Size">Choose Size</td></tr><tr><td><select class="float-right" name="os0">
                        <option value="Size One">Size One $100.00 USD</option>
                        <option value="Size Two">Size Two $200.00 USD</option>
                        <option value="Size Three">Size Three $300.00 USD</option>
                        <option value="Size Four">Size Four $400.00 USD</option>
                    </select> </td></tr>
                    </table>
                    <input type="hidden" name="currency_code" value="USD">
                    <input class="paymentBtn1" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                    </form>
                    </div>
              </div>
              <div class="row">
                  <button onclick="document.getElementById('myImg')src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'">Image 1</button>
                  <button onclick="document.getElementById('myImg')src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg'">Image 2</button>
              </div>
          </div>
      </div>
    </div>
  </div>
</div>
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
                <a type="button" data-toggle="modal" data-target="#myModal1"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/photoImage1-1.jpg'/></a>
            </div>
            <div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
                <a type="button" data-toggle="modal" data-target="#myModal2"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg'/></a>
            </div>
            <div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
                <a type="button" data-toggle="modal" data-target="#myModal3"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'/></a>
            </div>
        </div>
             <div class="col-md-4 col-md-offset-4 hidden-xs hidden-sm">
                    <a class="btn defaultBtn btn-block" href="/videography#photography">View More</a>
            </div>
             <div class="col-sm-8 col-sm-offset-2 visible-xs visible-sm">
                    <a class="btn defaultBtn btn-block" href="/videography#photography">View Photos</a>
            </div>
        </div>
    </div>
</section>
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.30514 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO