-2
"Show Picture"ボタンをクリックすると、画像がフェードインし、家の写真が表示されます。何らかの理由で私は私の人生のために働くことができません。また、フォームをクリアするためにリセットボタンが機能するように助けてください。jsが動作しない理由を理解できません
$(document).ready(function(){
$(".showA").click(function() {
$("#house1").fadeIn("slow");
});img
{
\t padding:29px;
\t opacity:0;
\t width:250px;
\t height:250px;
}
div
{
vertical-align:top;
width:267px;
height:auto;
display:inline-block;
padding:20px;
margin:0px;
border-radius:10px;
border:1px solid;
}
p
{
\t margin:5px;
\t padding:3px;
\t background-color:blue;
\t border-radius:8px;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <meta charset="UTF-8" />
\t \t <link rel="stylesheet" type="text/css" href="css/finalproject.css">
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
\t \t <script type="text/javascript" src="js/finalproject.js"> </script>
\t \t <title>Final Project</title>
\t </head>
\t
\t <body>
\t \t <center><h1>Vacation Rental</h1></center>
\t \t
\t \t <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>
\t \t \t <option value="5-10">5-10 Days</option>
\t \t \t <option value="6-7">10-15 Days</option>
\t \t \t <option value="8-9">15-20 Days</option>
\t \t </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>
\t \t \t <option value="5-10">5-10 Days</option>
\t \t \t <option value="6-7">10-15 Days</option>
\t \t \t <option value="8-9">15-20 Days</option>
\t \t </select>
\t \t <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>
\t \t \t <option value="5-10">5-10 Days</option>
\t \t \t <option value="6-7">10-15 Days</option>
\t \t \t <option value="8-9">15-20 Days</option>
\t \t </select>
\t \t <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>
\t \t \t <option value="5-10">5-10 Days</option>
\t \t \t <option value="6-7">10-15 Days</option>
\t \t \t <option value="8-9">15-20 Days</option>
\t \t </select>
\t \t <input id="showD" type="button" value="Show Picture">
<input id="submitD" type="button" value="Submit">
<input id="resetD" type="button" value="Reset">
</form></div>
\t <img id="house1" src="images/chatham.jpg" />
\t <img id="house2" src="images/wellfleet.jpg" />
\t <img id="house3" src="images/dennis.jpg" />
\t <img id="house4" src="images/provincetown.jpg" />
\t </body>
</html>
の可能性のある重複した[どのように私は私のJavaScriptコードをデバッグすることができますか？]（http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-コード） – Liam
JSコードを実行しているとき。私はクロムにインスペクタ（ 'ctrl + shift + i'）を開いておくことをお勧めします。 JSが失敗した場合、デバッグを容易にする相対的なエラーが表示されます。さらに、あなたが書いている間に潜在的な構文エラー（カッコがないあなたのような）を示す良い開発環境（テキストエディタ/オンラインエディタ）を見てください。 – Francisco