更改星形onClick的颜色-为什么不起作用？

Question

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)

Answer 1

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 .

Answer 2

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>

Answer 3

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/