Title: Javascript not working in wordpress
Last modified: August 31, 2016

---

# Javascript not working in wordpress

 *  Resolved [Mariah_A_C](https://wordpress.org/support/users/mariah_a_c/)
 * (@mariah_a_c)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/javascript-not-working-in-wordpress/)
 * Forgive my stupidity on this I have never worked with Javascript before and I
   am struggling with it. I have a very basic understanding of php, mysql, html,
   and css.
 * I am trying to create a very basic image gallery where someone can select an 
   image and I can insert the product_id associated with that image into a ?add-
   to-cart url.
 * So far I have written the code to get the products, their images, everything 
   I need. I then foreach and create a simple photo gallery with the product_id 
   stored in the alt= of the img.
 * Now the hard part how to allow someone to select the img (without having to reload
   the page). I went to W3schools found a javascript photo gallery and using their“
   try it editor” I paired it down a lot and made some small changes. The code works
   in thier editor, but when I put it in wordpress the gallery shows up, but it 
   wont let me select the images.
 * here is the code:
 *     ```
       <div class="colorway" style="float:left; padding:5px;">
         <div class="img">
             <img src="color_1.jpg" alt="product_id" width="100">
           <div class="desc">Color 1 </div>
         </div>
       </div>
   
       <div class="colorway" style="float:left;padding:5px;">
         <div class="img">
           <img src="color_2.jpg" alt="product_id" width="100" >
           <div class="desc">Color 2</div>
         </div>
       </div>
   
       <div class="colorway" style="float:left;padding:5px;">
         <div class="img">
           <img src="color_3.jpg" alt="product_id" width="100">
           <div class="desc">Color 3</div>
         </div>
       </div>
   
       <div class="colorway" style="float:left;padding:5px;">
         <div class="img">
           <img src="color_4.jpg" alt="product_id" width="100">
           <div class="desc">Color 4</div>
         </div>
       </div>
   
       <div style="clear:both;"></div>
   
       <!-- The Modal -->
       <div id="myModal" class="modal">
         <span class="close"></span>
         <img class="modal-content" id="img01">
         <div id="caption"></div>
       </div>
   
       <script>
       // Get the modal
       var modal = document.getElementById('myModal');
   
       // Get the <span> element that closes the modal
       var span = document.getElementsByClassName("close")[0];
   
       // When the user clicks on <span> (x), close the modal
       span.onclick = function() {
           modal.style.display = "none";
       }
   
       // Get all images and insert the clicked image inside the modal
       // Get the content of the image description and insert it inside the modal image caption
       var images = document.getElementsByTagName('img');
       var modalImg = document.getElementById("img01");
       var captionText = document.getElementById("caption");
       var i;
       for (i = 0; i < images.length; i++) {
          images[i].onclick = function(){
              modal.style.display = "block";
              modalImg.src = this.src;
              modalImg.alt = this.alt;
              modalImg.width = 300;
              captionText.innerHTML = '<a href ="http://www.mydomain.com/cart/?add-to-cart=' + modalImg.alt +'">ADD TO CART</a>';
          }
       }
       </script>
       ```
   
 * I would really appreciate any suggestions. Thank you! I am also open to other
   ways of making this work.

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Thread Starter [Mariah_A_C](https://wordpress.org/support/users/mariah_a_c/)
 * (@mariah_a_c)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/javascript-not-working-in-wordpress/#post-7162099)
 * I am getting closer to a solution. The code is stored correctly in the database,
   but wordpress is wrapping every line in `<p></p>`. I don’t really want to turn
   this safety feature off for the whole site. Is there a good plugin for this or
   any suggestions on how to avoid the <p>.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/javascript-not-working-in-wordpress/#post-7162131)
 * I believe that if you edit the script block so that there are no blank lines 
   the p tags are not inserted, though this is obviously a tenuous state.
 * Post content is passed through the `wpautop()` function via filter, which auto-
   inserts the p tags. Removing the filter suppresses the p tag insertion for all
   posts.
 * One way to insert code and keep it protected is to insert it via a custom shortcode.
   You define the output in a shortcode handler and relate it to the shortcode you
   want to use with [add_shortcode()](http://codex.wordpress.org/Function_Reference/add_shortcode).
   Then, where you want the code to appear, simply enter the shortcode, as in `[
   my-js-code]` or whatever. Shortcode output bypasses the `wpautop()` filter.
 * Finally, post content is not the ideal place to place code blocks. Ideally, all
   javascript in WP should be in external files that are enqueued with [wp_enqueue_script()](https://developer.wordpress.org/reference/functions/wp_enqueue_script/).
   This should be done with all but the briefest of code blocks. You can manage 
   when the script is enqueued with `if()` statements within the callback to ‘wp_enqueue_scripts’
   that determines if `wp_enqueue_script()` is actually called or not. For example,
   if you know the ID of the post that needs the script loaded, use something like`
   if ( $id == get_queried_object_id ) ...`
 *  Thread Starter [Mariah_A_C](https://wordpress.org/support/users/mariah_a_c/)
 * (@mariah_a_c)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/javascript-not-working-in-wordpress/#post-7162167)
 * Thank you! I found a plugin to create short code for snippets of code.
    it is
   now working. Thanks for the help!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Javascript not working in wordpress’ is closed to new replies.

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 3 replies
 * 2 participants
 * Last reply from: [Mariah_A_C](https://wordpress.org/support/users/mariah_a_c/)
 * Last activity: [10 years, 3 months ago](https://wordpress.org/support/topic/javascript-not-working-in-wordpress/#post-7162167)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics