Translate

Friday 14 November 2014

Change the Text by using Javascript

Defintion of .html():
The html() method sets or returns the content (innerHTML) of the selected elements.
Get the HTML contents of the first element in the set of matched elements.
This method does not accept any arguments.
This method is not available on XML documents.

Description:
In an HTML document, .html() can be used to get the contents of any element. If the selector expression matches more than one element,
only the first match will have its HTML content returned.
 Example Code:
     $(".cointaner div").html();
Screenshot:
       Step 1:

 Step 2:


Style:
<style>
#type1
{
border: 1px solid #000;
float: left;
padding: 3px 67px 6px 50px;
width: 2px;background-color: #000000;
color: #FFFFFF;
}
#type2
{
border: 1px solid #000;
float: left;
padding: 3px 67px 6px 50px;
width: 2px;background-color:blue;
color: #FFFFFF;
}
.cointaner
{
border: 1px solid #FFF;
width:34%;
height:75px;
}
.heading1
{
margin:57px -15px 36px -115px;
}
#sel_hotel
{
font-size:16px;
color:green;
font-weight:bold;
}
</style>

HTML Form:
<body>
<form name="form1" id="form1" method="post">
<div class="cointaner">
<div id="type1" class="change_ho">PHP</div>
<div id="type2" class="change_ho">JS</div>
<div><input type="hidden" id="type3" name="type" value="PHP"></div>
<div align="center" class="heading1" id="sel_hotel">Search Creatersite</div>
</div>
</form>
</body>
Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
//$("#type3").removeAttr("disabled");
$(".cointaner div").click(function(){
var htmlone=$(this).html();
$("#type1").removeClass("change_ho");
$("#type2").removeClass("change_ho");
if(htmlone == "PHP") {
$("#type3").val("PHP");
$("#sel_hotel").html("Search Creatersite");
}  else {
$("#type3").val("JS");
$("#sel_hotel").html("Creatersite is a Blog");
}
});
});
</script>

No comments:

Post a Comment