CODEWITHSUNDEEP
javascriptjquerycss
Sheldon Scott
Sheldon Scott

Reputation: 741

Changing star colour onClick - why doesn't this work?

I have a very simple star rating system. The issue I am having is with an onclick event that is supposed to change the colour of the star when clicked.

I've created a jsFiddle for what I have so far.

HTML

<div class="rating">
<span id="five-stars" onclick="vote(5); return false; 
document.getElementById('five-stars').style.color = '#ff6266'" 
data-toggle="tooltip" data-placement="bottom" title="Rate 5 stars out of 5">
&#9734;</span><span id="fout-stars" onclick="vote(4); return false; 
document.getElementById('four-stars').style.color = '#ff6266'" 
data-toggle="tooltip" data-placement="bottom" title="Rate 4 stars out of 5">
&#9734;</span><span id="three-stars" onclick="vote(3); return false; 
document.getElementById('three-stars').style.color = '#ff6266'" 
data-toggle="tooltip" data-placement="bottom" title="Rate 3 stars out of 5">
&#9734;</span><span id="two-stars" onclick="vote(2); return false; 
document.getElementById('two-stars').style.color = '#ff6266'" 
data-toggle="tooltip" data-placement="bottom" title="Rate 2 stars out of 5">
&#9734;</span><span id="one-star" onclick="vote(1); return false; 
document.getElementById('one-star').style.color = '#ff6266'" 
data-toggle="tooltip" data-placement="bottom" title="Rate 1 star out of 5">
&#9734;</span>
</div>

CSS

.rating {
    color:#02dbdd;
    font: 700 26px/normal 'Montserrat', sans-serif;
    text-transform:uppercase;
    display:block;
    cursor:pointer;
    margin-right:100px;
}
.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

Not sure why it won't change?

(The RTL thing is a whole other problem to tackle... lol)

Upvotes: 0

Views: 1395

Answers (3)

Quentin
Quentin

Reputation: 943979

You have three different problems that directly impact your test:

  1. You've configured JS Fiddle so that the code in the JS pane is wrapped in a function and executed on load. This means that your function isn't a global and is inaccessible to the intrinsic event attributes. Change the configuration of JS Fiddle or rewrite your code to bind event handlers with JS instead of HTML.
  2. You've not configured JS Fiddle to load jQuery, so when you try to call $.post it errors because $ is undeclared. Add jQuery.
  3. You've put return false in the function before you try to set the colour. Naturally the function returns before it reaches that line. Remove the return false.

Upvotes: 3

AtheistP3ace
AtheistP3ace

Reputation: 9691

  1. vote function didn't exist.
  2. You had return false so it didn't get to the changing of style.
  3. You can also reference the element with this.
  4. You were also missing the closing DIV tag even though this had nothing to do with your issue.

Fiddle: http://jsfiddle.net/nn5ytthL/5/

<div class="rating">
    <span id="five-stars" onclick="vote(5); this.style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 5 stars out of 5">&#9734;</span>
    <span id="fout-stars" onclick="vote(4); this.style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 4 stars out of 5">&#9734;</span>
    <span id="three-stars" onclick="vote(3); this.style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 3 stars out of 5">&#9734;</span>
    <span id="two-stars" onclick="vote(2); this.style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 2 stars out of 5">&#9734;</span>
    <span id="one-star" onclick="vote(1); this.style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 1 star out of 5">&#9734;</span>
</div>

Upvotes: 2

Serhii Kozachenko
Serhii Kozachenko

Reputation: 1401

JS stop execution when can't find vote(5) function. Add it and remove return from the middle of onclick handler then it works.

function vote(){}

Here updated fiddle: http://jsfiddle.net/nn5ytthL/4/

Upvotes: 0

Related Questions