Cannot figure out why js is not working

Question

I am trying to make this so when I click the "Show Picture" button, a picture will fade in, showing a picture of the house. For some reason I cannot get it to work for the life of me. Also, I would like some help getting the reset button to work in order to clear the form.

$(document).ready(function(){ 

 $(".showA").click(function() { 
    $("#house1").fadeIn("slow");
});

img
{
 padding:29px;
 opacity:0;
 width:250px;
 height:250px;
}

div
{
  vertical-align:top; 
  width:267px; 
  height:auto;
  display:inline-block; 
  padding:20px; 
  margin:0px;      
  border-radius:10px; 
  border:1px solid;
}

p 
{ 
 margin:5px; 
 padding:3px; 
 background-color:blue; 
 border-radius:8px; 
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="css/finalproject.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/finalproject.js"> </script>
  <title>Final Project</title>
 </head>
 
 <body>
  <center><h1>Vacation Rental</h1></center>
  
  <div><form id="chatham">
        <label><b><u>Chatham, MA</u></b></label><br>
        <label><b>$300 a Day</b></label><br>
        <label>Name:</label><br>
        <input name="nameA" type="text" /><br>
        <label>Email Address:</label><br>
        <input name="emailA" type="text" /><br>
        <label>Phone Number:</label><br>
        <input name="phoneA" type="text" /><br>
        <label>How many days would you like to rent?</label><br>
        <select>
     <option value="5-10">5-10 Days</option>
     <option value="6-7">10-15 Days</option>
     <option value="8-9">15-20 Days</option>
  </select>
        <input id="showA" type="button" value="Show Picture">
        <input id="submitA" type="button" value="Submit">
        <input id="resetA" type="button" value="Reset">
      </form></div>
      
      <div><form id="wellfleet">
        <label><b><u>Wellfleet, MA</u></b></label><br>
        <label><b>$250 a Day</b></label><br>
        <label>Name:</label><br>
        <input name="nameB" type="text" /><br>
        <label>Email Address:</label><br>
        <input name="emailB" type="text" /><br>
        <label>Phone Number:</label><br>
        <input name="phoneB" type="text" /><br>
        <label>How many days would you like to rent?</label><br>
        <select>
     <option value="5-10">5-10 Days</option>
     <option value="6-7">10-15 Days</option>
     <option value="8-9">15-20 Days</option>
  </select>
  <input id="showB" type="button" value="Show Picture">
        <input id="submitB" type="button" value="Submit">
        <input id="resetB" type="button" value="Reset">
      </form></div>
      
      <div><form id="dennis">
        <label><b><u>Dennis, MA</u></b></label><br>
        <label><b>$350 a Day</b></label><br>
        <label>Name:</label><br>
        <input name="nameC" type="text" /><br>
        <label>Email Address:</label><br>
        <input name="emailC" type="text" /><br>
        <label>Phone Number:</label><br>
        <input name="phoneC" type="text" /><br>
        <label>How many days would you like to rent?</label><br>
        <select>
     <option value="5-10">5-10 Days</option>
     <option value="6-7">10-15 Days</option>
     <option value="8-9">15-20 Days</option>
  </select>
  <input id="showC" type="button" value="Show Picture">
        <input id="submitC" type="button" value="Submit">
        <input id="resetC" type="button" value="Reset">
      </form></div>
      
      <div><form id="provincetown">
        <label><b><u>Provincetown, MA</u></b></label><br>
        <label><b>$300 a Day</b></label><br>
        <label>Name:</label><br>
        <input name="nameD" type="text" /><br>
        <label>Email Address:</label><br>
        <input name="emailD" type="text" /><br>
        <label>Phone Number:</label><br>
        <input name="phoneD" type="text" /><br>
        <label>How many days would you like to rent?</label><br>
        <select>
     <option value="5-10">5-10 Days</option>
     <option value="6-7">10-15 Days</option>
     <option value="8-9">15-20 Days</option>
  </select>
  <input id="showD" type="button" value="Show Picture">
        <input id="submitD" type="button" value="Submit">
        <input id="resetD" type="button" value="Reset">
      </form></div>
 
 <img id="house1" src="images/chatham.jpg" />
 <img id="house2" src="images/wellfleet.jpg" />
 <img id="house3" src="images/dennis.jpg" />
 <img id="house4" src="images/provincetown.jpg" />
 </body>
</html>

Possible duplicate of [How can I debug my JavaScript code?](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Liam, Apr 26 '17 at 15:05
When you are running JS code. I would recommend by opening up the inspector (`ctrl+shift+i`) on chrome. If JS fails it will show the relative error there making debugging easier. In addition look at a good development environment (text editor/online editor) which will show potential syntax errors (like yours which was missing parenthesis) while you write. — Francisco, Apr 26 '17 at 15:26

score 0 · Answer 1 · answered Apr 26 '17 at 14:55

You miss to close some parenthesis, see follow:

$(document).ready(function(){ 

 $(".showA").click(function() { 
    $("#house1").fadeOut("slow");
  });
}); //<---- I've added this line!

$(document).ready(function(){ 

 $(".showA").click(function() { 
    $("#house1").fadeOut("slow");
  });
});

img
{
 padding:29px;
 opacity:0;
 width:250px;
 height:250px;
}

div
{
  vertical-align:top; 
  width:267px; 
  height:auto;
  display:inline-block; 
  padding:20px; 
  margin:0px;      
  border-radius:10px; 
  border:1px solid;
}

p 
{ 
 margin:5px; 
 padding:3px; 
 background-color:blue; 
 border-radius:8px; 
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="css/finalproject.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/finalproject.js"> </script>
  <title>Final Project</title>
 </head>
 
 <body>
  <center><h1>Vacation Rental</h1></center>
  
  <div><form id="chatham">
        <label><b><u>Chatham, MA</u></b></label><br>
        <label><b>$300 a Day</b></label><br>
        <label>Name:</label><br>
        <input name="nameA" type="text" /><br>
        <label>Email Address:</label><br>
        <input name="emailA" type="text" /><br>
        <label>Phone Number:</label><br>
        <input name="phoneA" type="text" /><br>
        <label>How many days would you like to rent?</label><br>
        <select>
     <option value="5-10">5-10 Days</option>
     <option value="6-7">10-15 Days</option>
     <option value="8-9">15-20 Days</option>
  </select>
        <input id="showA" type="button" value="Show Picture">
        <input id="submitA" type="button" value="Submit">
        <input id="resetA" type="button" value="Reset">
      </form></div>
      
      <div><form id="wellfleet">
        <label><b><u>Wellfleet, MA</u></b></label><br>
        <label><b>$250 a Day</b></label><br>
        <label>Name:</label><br>
        <input name="nameB" type="text" /><br>
        <label>Email Address:</label><br>
        <input name="emailB" type="text" /><br>
        <label>Phone Number:</label><br>
        <input name="phoneB" type="text" /><br>
        <label>How many days would you like to rent?</label><br>
        <select>
     <option value="5-10">5-10 Days</option>
     <option value="6-7">10-15 Days</option>
     <option value="8-9">15-20 Days</option>
  </select>
  <input id="showB" type="button" value="Show Picture">
        <input id="submitB" type="button" value="Submit">
        <input id="resetB" type="button" value="Reset">
      </form></div>
      
      <div><form id="dennis">
        <label><b><u>Dennis, MA</u></b></label><br>
        <label><b>$350 a Day</b></label><br>
        <label>Name:</label><br>
        <input name="nameC" type="text" /><br>
        <label>Email Address:</label><br>
        <input name="emailC" type="text" /><br>
        <label>Phone Number:</label><br>
        <input name="phoneC" type="text" /><br>
        <label>How many days would you like to rent?</label><br>
        <select>
     <option value="5-10">5-10 Days</option>
     <option value="6-7">10-15 Days</option>
     <option value="8-9">15-20 Days</option>
  </select>
  <input id="showC" type="button" value="Show Picture">
        <input id="submitC" type="button" value="Submit">
        <input id="resetC" type="button" value="Reset">
      </form></div>
      
      <div><form id="provincetown">
        <label><b><u>Provincetown, MA</u></b></label><br>
        <label><b>$300 a Day</b></label><br>
        <label>Name:</label><br>
        <input name="nameD" type="text" /><br>
        <label>Email Address:</label><br>
        <input name="emailD" type="text" /><br>
        <label>Phone Number:</label><br>
        <input name="phoneD" type="text" /><br>
        <label>How many days would you like to rent?</label><br>
        <select>
     <option value="5-10">5-10 Days</option>
     <option value="6-7">10-15 Days</option>
     <option value="8-9">15-20 Days</option>
  </select>
  <input id="showD" type="button" value="Show Picture">
        <input id="submitD" type="button" value="Submit">
        <input id="resetD" type="button" value="Reset">
      </form></div>
 
 <img id="house1" src="images/chatham.jpg" />
 <img id="house2" src="images/wellfleet.jpg" />
 <img id="house3" src="images/dennis.jpg" />
 <img id="house4" src="images/provincetown.jpg" />
 </body>
</html>

Thank you, but it is still not executing the function unfortunately. — kylebuzzy, Apr 26 '17 at 14:58

Yosvel Quintero · Answer 2 · 2017-04-26T15:13:33.997

The problem is that in your code you are doing $('.showA') instead of $('#showA') because it's an id attribute what you have and also check that you have to modify the opacity to be able to see the image.

$('#showA').on('click', function() { 
    $('#house1').css('opacity', 1).fadeIn('slow');
});

img {
  padding:29px;
  opacity:0;
  width:250px;
  height:250px;
}

div {
  vertical-align:top; 
  width:267px; 
  height:auto;
  display:inline-block; 
  padding:20px; 
  margin:0px;      
  border-radius:10px; 
  border:1px solid;
}

p { 
  margin:5px; 
  padding:3px; 
  background-color:blue; 
  border-radius:8px; 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<center>
  <h1>Vacation Rental</h1>
</center>

<div>
  <form id="chatham">
    <label><b><u>Chatham, MA</u></b></label><br>
    <label><b>$300 a Day</b></label><br>
    <label>Name:</label><br>
    <input name="nameA" type="text" /><br>
    <label>Email Address:</label><br>
    <input name="emailA" type="text" /><br>
    <label>Phone Number:</label><br>
    <input name="phoneA" type="text" /><br>
    <label>How many days would you like to rent?</label><br>
    <select>
      <option value="5-10">5-10 Days</option>
      <option value="6-7">10-15 Days</option>
      <option value="8-9">15-20 Days</option>
    </select>
    <input id="showA" type="button" value="Show Picture">
    <input id="submitA" type="button" value="Submit">
    <input id="resetA" type="button" value="Reset">
  </form>
</div>

<div>
  <form id="wellfleet">
    <label><b><u>Wellfleet, MA</u></b></label><br>
    <label><b>$250 a Day</b></label><br>
    <label>Name:</label><br>
    <input name="nameB" type="text" /><br>
    <label>Email Address:</label><br>
    <input name="emailB" type="text" /><br>
    <label>Phone Number:</label><br>
    <input name="phoneB" type="text" /><br>
    <label>How many days would you like to rent?</label><br>
    <select>
      <option value="5-10">5-10 Days</option>
      <option value="6-7">10-15 Days</option>
      <option value="8-9">15-20 Days</option>
    </select>
    <input id="showB" type="button" value="Show Picture">
    <input id="submitB" type="button" value="Submit">
    <input id="resetB" type="button" value="Reset">
  </form>
</div>

<div>
  <form id="dennis">
    <label><b><u>Dennis, MA</u></b></label><br>
    <label><b>$350 a Day</b></label><br>
    <label>Name:</label><br>
    <input name="nameC" type="text" /><br>
    <label>Email Address:</label><br>
    <input name="emailC" type="text" /><br>
    <label>Phone Number:</label><br>
    <input name="phoneC" type="text" /><br>
    <label>How many days would you like to rent?</label><br>
    <select>
      <option value="5-10">5-10 Days</option>
      <option value="6-7">10-15 Days</option>
      <option value="8-9">15-20 Days</option>
    </select>
    <input id="showC" type="button" value="Show Picture">
    <input id="submitC" type="button" value="Submit">
    <input id="resetC" type="button" value="Reset">
  </form>
</div>

<div>
  <form id="provincetown">
    <label><b><u>Provincetown, MA</u></b></label><br>
    <label><b>$300 a Day</b></label><br>
    <label>Name:</label><br>
    <input name="nameD" type="text" /><br>
    <label>Email Address:</label><br>
    <input name="emailD" type="text" /><br>
    <label>Phone Number:</label><br>
    <input name="phoneD" type="text" /><br>
    <label>How many days would you like to rent?</label><br>
    <select>
      <option value="5-10">5-10 Days</option>
      <option value="6-7">10-15 Days</option>
      <option value="8-9">15-20 Days</option>
    </select>
    <input id="showD" type="button" value="Show Picture">
    <input id="submitD" type="button" value="Submit">
    <input id="resetD" type="button" value="Reset">
  </form>
</div>

<img id="house1" src="http://placehold.it/350x150" />
<img id="house2" src="http://placehold.it/350x150" />
<img id="house3" src="http://placehold.it/350x150" />
<img id="house4" src="http://placehold.it/350x150" />

Thank you so much! Is there any chance that you can help me make it so it can fade back out once the button is pressed again? It's a project for school and I have to use an If/Else statement and I'm pretty sure it can be used in this situation. — kylebuzzy, Apr 26 '17 at 15:47
The original question was to make your code work.. I don't see necessary to add `if/else` statement.. Can you select the correct answer? — Yosvel Quintero, Apr 27 '17 at 07:57

apires · Answer 3 · 2017-04-28T11:43:39.447

Okay, there are a few mistakes on your code.

First, you're trying to find the element by class $(".showA") instead of by id $("#showA"). Your element has no showA class.

Second, you missed $(document).ready closing tags.

I have also made an event to handle the reset function.

See below.

$(document).ready(function(){ 

 $("#showA").click(function() { 
    $('#house1').css('opacity', 1).fadeIn('slow');
});

$('#resetA').click(function(){
   $(this).parent('form').find('input[type="text"]').val('');
});
});

img
{
 padding:29px;
 opacity:0;
 width:250px;
 height:250px;
}

div
{
  vertical-align:top; 
  width:267px; 
  height:auto;
  display:inline-block; 
  padding:20px; 
  margin:0px;      
  border-radius:10px; 
  border:1px solid;
}

p 
{ 
 margin:5px; 
 padding:3px; 
 background-color:blue; 
 border-radius:8px; 
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="css/finalproject.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/finalproject.js"> </script>
  <title>Final Project</title>
 </head>
 
 <body>
  <center><h1>Vacation Rental</h1></center>
  
  <div><form id="chatham">
        <label><b><u>Chatham, MA</u></b></label><br>
        <label><b>$300 a Day</b></label><br>
        <label>Name:</label><br>
        <input name="nameA" type="text" /><br>
        <label>Email Address:</label><br>
        <input name="emailA" type="text" /><br>
        <label>Phone Number:</label><br>
        <input name="phoneA" type="text" /><br>
        <label>How many days would you like to rent?</label><br>
        <select>
     <option value="5-10">5-10 Days</option>
     <option value="6-7">10-15 Days</option>
     <option value="8-9">15-20 Days</option>
  </select>
        <input id="showA" type="button" value="Show Picture">
        <input id="submitA" type="button" value="Submit">
        <input id="resetA" type="button" value="Reset">
      </form></div>
      
      <div><form id="wellfleet">
        <label><b><u>Wellfleet, MA</u></b></label><br>
        <label><b>$250 a Day</b></label><br>
        <label>Name:</label><br>
        <input name="nameB" type="text" /><br>
        <label>Email Address:</label><br>
        <input name="emailB" type="text" /><br>
        <label>Phone Number:</label><br>
        <input name="phoneB" type="text" /><br>
        <label>How many days would you like to rent?</label><br>
        <select>
     <option value="5-10">5-10 Days</option>
     <option value="6-7">10-15 Days</option>
     <option value="8-9">15-20 Days</option>
  </select>
  <input id="showB" type="button" value="Show Picture">
        <input id="submitB" type="button" value="Submit">
        <input id="resetB" type="button" value="Reset">
      </form></div>
      
      <div><form id="dennis">
        <label><b><u>Dennis, MA</u></b></label><br>
        <label><b>$350 a Day</b></label><br>
        <label>Name:</label><br>
        <input name="nameC" type="text" /><br>
        <label>Email Address:</label><br>
        <input name="emailC" type="text" /><br>
        <label>Phone Number:</label><br>
        <input name="phoneC" type="text" /><br>
        <label>How many days would you like to rent?</label><br>
        <select>
     <option value="5-10">5-10 Days</option>
     <option value="6-7">10-15 Days</option>
     <option value="8-9">15-20 Days</option>
  </select>
  <input id="showC" type="button" value="Show Picture">
        <input id="submitC" type="button" value="Submit">
        <input id="resetC" type="button" value="Reset">
      </form></div>
      
      <div><form id="provincetown">
        <label><b><u>Provincetown, MA</u></b></label><br>
        <label><b>$300 a Day</b></label><br>
        <label>Name:</label><br>
        <input name="nameD" type="text" /><br>
        <label>Email Address:</label><br>
        <input name="emailD" type="text" /><br>
        <label>Phone Number:</label><br>
        <input name="phoneD" type="text" /><br>
        <label>How many days would you like to rent?</label><br>
        <select>
     <option value="5-10">5-10 Days</option>
     <option value="6-7">10-15 Days</option>
     <option value="8-9">15-20 Days</option>
  </select>
  <input id="showD" type="button" value="Show Picture">
        <input id="submitD" type="button" value="Submit">
        <input id="resetD" type="button" value="Reset">
      </form></div>
 
 <img id="house1" src="images/chatham.jpg" />
 <img id="house2" src="images/wellfleet.jpg" />
 <img id="house3" src="images/dennis.jpg" />
 <img id="house4" src="images/provincetown.jpg" />
 </body>
</html>

Cannot figure out why js is not working

3 Answers3