Im trying to make my div tag clickable, but i cant find out whats the problem. Its a five star rating system, where the stars is giving different values. from 1 to 5.
On mouse over div tag is changing image, but wont give me any result when clicking.
my div tag
<div id="5" OnClick="SendRating(value);" onmouseover=rateStar(id) value="5" ><img src="star.jpg"></div>
function rateStar(rating){
var i = 1;
var ratings = '';
for (i==1; i<=5; i++){
if (i<=rating){
document.getElementById(i).innerHTML = '<img src=\"star1.gif\">';
}
else{
document.getElementById(i).innerHTML = '<img src=\"star.jpg\">';
}
}
}
And this is my sendrating function
function SendRating(RatingValue){
var paramas = "rating="+RatingValue;
$.ajax({
type: "POST",
url: "rating.php",
data: paramas,
success: function(responseText)
{
document.getElementById("ContentHolder").innerHTML = responseText;
}
}
);
}
onclick
you call the function SendRating
with one argument — value
— but you never define that variable.
You also have a number of errors in the HTML, you should validate it.
As stated earlier the HTML cannot find your JavaScript function. But also note that you have not nested in the JS funciton inside <script type="text/javascript">...</script> tags. So the function declaration is interpreted by the browser as text, and not as JavaScript.
Some tips on the HTML: All attributes should be lower-case, and their value should be inside double-quotes.
get the star rating value from the id and use it like this
<script type="text/javascript">
function clicked(item) {
alert($(item).attr("id"));
}
</script>
<div onclick="sendRating(this);" id="5">test</div>
you can also try using the following
<div id="3" onClick="sendRating(this.id)">B3</div>
<script type="text/javascript">
function sendRating(id)
{
alert(id);
}
</script>
for (i==1; i<=5; i++){
should be:
for (var i=1; i<=5; i++){
and, OnClick
should be all lowercase,