Menu
I have this HtML and java script code below. Its suppose to do this: when i click on yes, the textarea box that says why i like cs is suppose to show up and when i click on no, vice versa. but its not doing it, any help?
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>forms.html</title>
<h1> Welcome </h1>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jqueryui.
css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("img") .mouseover(function() {
$(this).attr("src", "pika2.jpg");
});
$("img").mouseout(function() {
$(this).attr("src", "pika1.jpg");
});
$("#show").hide();
$("#hide").hide();
$("#show").click(function(){
$("#hide").hide()
});
$("#hide").click(function(){
$("#show").show()
});
});
</script>
</head>
<body>
<img src="pika1.jpg" alt="piakchu"/>
<p> Please tell me who you are: </P>
<form action="sumbit.html">
<p>
<label for="First Name">First name:</label>
<input type = "text" name="First Name" id="First Name" autofocus>
</P>
<p>
<label for="Last Name">Last Name:</label>
<input type = "text" name="Last Name" id="Last Name" required >
</P>
<div id="show">
<p> Do you like computer science: </p>
<p><input type="radio" name="list" value="yes" id="yes"/>
<label for="yes">Yes</label>
<input type="radio" name="list" value="No" id="No"/>
<label for="No">No</label>
</P>
</div>
<div id="hide">
<p>
<input type="submit" value="Submit your answers"/>
</p>
<p> Why don't you like computer science?: </p>
<textarea name="textarea" rows="5" cols="30" placeholder="Enter your text here (optional)">
</textarea>
</div>
</form>
</body>
403
The toggle() method attaches two or more functions to toggle between for the click event for the selected elements. When clicking on an element, the first specified function fires, when clicking again, the second function fires, and so on. Note: There is also a jQuery Effects method called toggle().
Toggle Class Toggle between adding a class name to the div element with id="myDIV" (in this example we use a button to toggle the class name).
Toggling the class means if there is no class name assigned to the element, then a class name can be assigned to it dynamically or if a certain class is already present, then it can be removed dynamically by just using the toggle() or by using contains(), add(), remove() methods of DOMTokenList object within JavaScript ...
your answer is ..........
$(document).ready(function(){
$("img") .mouseover(function() {
$(this).attr("src", "pika2.jpg");
});
$("img").mouseout(function() {
$(this).attr("src", "pika1.jpg");
});
$("#hide").hide();
$(".yes").click(function(){
$("#hide").show();
});
$(".no").click(function(){
$("#hide").hide();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<img src="pika1.jpg" alt="piakchu"/>
<p> Please tell me who you are: </P>
<form action="sumbit.html">
<p>
<label for="First Name">First name:</label>
<input type = "text" name="First Name" id="First Name" autofocus>
</P>
<p>
<label for="Last Name">Last Name:</label>
<input type = "text" name="Last Name" id="Last Name" required >
</P>
<div id="show">
<p> Do you like computer science: </p>
<p><input type="radio" name="list" value="yes" id="yes" class="yes"/>
<label for="yes">Yes</label>
<input type="radio" name="list" value="No" id="No" class="no"/>
<label for="No">No</label>
</P>
</div>
<div id="hide">
<p>
<input type="submit" value="Submit your answers"/>
</p>
<p> Why don't you like computer science?: </p>
<textarea name="textarea" rows="5" cols="30" placeholder="Enter your text here (optional)">
</textarea>
</div>
</form>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
