Star Rating in javascript value comming from backend

Question

I need star rating. In page value are comming from Java/Backend.(I need only javascript or prototypejs solution.)

Eg: If value come 1 then it must show 1 STAR.

If value come 2 then it must show 2 STAR and so on...till 5

This whole thing is happening in dynamic . I am using below code, but this does not create ID.

Javascript

function display() {
   var x = "yr";
    show_image(x ,2) ;
}

function show_image (id,number) {
    var x = number;
    var y = id;
    for (var i =0; i<x; i++){
        var img = document.createElement("img");
        img.src = "stars.png";
       document.getElementById(y).appendChild(img);
    }
}

Thanks for help.

Your code works. http://jsfiddle.net/mplungjan/knd1433z/ - assuming you have a container with id="yr" — mplungjan, Sep 21 '15 at 06:06
@mplungjan:Now I am using static value(2), but consider this value coming from java, that time it doesn't work — Mike Phils, Sep 21 '15 at 06:10
From java how? You need to show the code that does not work! — mplungjan, Sep 21 '15 at 06:12
http://www.javacodegeeks.com/2014/09/jquery-ajax-servlets-integration-building-a-complete-application.html — mplungjan, Sep 21 '15 at 06:14
http://stackoverflow.com/questions/1987524/turn-a-number-into-star-rating-display-using-jquery-and-css- like this but in javascript form — Mike Phils, Sep 21 '15 at 10:18

rajuGT · Accepted Answer · 2015-09-27T16:01:38.363

Check this fiddle1 fiddle2

//Just for Demo purpose
function getRating() {
    var number = prompt("Enter the rating?");
    if(number *= 1 > 0  && number <=5) {
        show_image('yr', number);
    } else {
        alert("Enter valid rating, greater than 0");
    }
}

function show_image (id,number) {
    document.getElementById(id).innerHTML = '';
    for (var i =0; i<number; i++){
        var img = document.createElement("img");
        img.height=10;
        img.src = "http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/512/star-full-icon.png";
       document.getElementById(id).appendChild(img);
    }
}

Your code has no issue, it is working fine. Simplest way to call this function from your Java Servlet/JSP response is, added <script>show_image('_some_id_', number_of_star)</script>

Add comment, if you have any query, or if my understanding of problem itself is not correct.

Star Rating in javascript value comming from backend

1 Answers1