-2
Ich versuche, dies zu machen, wenn ich auf die Schaltfläche "Bild anzeigen" klicke, wird ein Bild eingeblendet, das ein Bild des Hauses zeigt. Aus irgendeinem Grund kann ich es nicht für das Leben von mir arbeiten lassen. Außerdem möchte ich, dass die Reset-Schaltfläche funktioniert, um das Formular zu löschen.Kann nicht herausfinden, warum js nicht funktioniert
$(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>
Mögliche Duplikat [Wie kann ich meine JavaScript-Code debuggen?] (Http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript- Code) – Liam
Wenn Sie JS-Code ausführen. Ich würde empfehlen, indem Sie den Inspektor ('Strg + Shift + I') auf Chrom öffnen. Wenn JS fehlschlägt, wird dort der relative Fehler angezeigt, was das Debuggen erleichtert. Sehen Sie sich außerdem eine gute Entwicklungsumgebung (Texteditor/Online-Editor) an, die beim Schreiben mögliche Syntaxfehler (wie Ihre fehlenden Klammern) zeigt. – Francisco