Создать рейтинг Ранг с символами

Question

Я новичок в кодировании, и я пытаюсь построить оценку баллов, превращая партитуру в символы.

Для этого я использую код из SOURCE CODE

Что мне нужно делать, и просто не могу, это сделать его применимым к более чем один раз. Мне нужно было быть чем-то вроде ID+1/ID+2 и т. Д., Чтобы я мог применить его ко всем участникам.

Я мои pen here

function test_skill() { 
    var junkVal=document.getElementById('score').value; 
    junkVal=Math.floor(junkVal); 
    var obStr=new String(junkVal); 
    numReversed=obStr.split(""); 
    actnumber=numReversed.reverse(); 

    if(Number(junkVal) >=0){ 
     //do nothing 
    } 
    else{ 
     alert('wrong Number cannot be converted'); 
     return false; 
    } 
    if(Number(junkVal)==0){ 
     document.getElementById('container').innerHTML=obStr+''+''; 
     return false; 
    } 
    if(actnumber.length>9){ 
     alert('Oops!!!! the Number is too big to covertes'); 
     return false; 
    } 

    var iWords=["Zero", "<i class='fa fa-moon-o fa-lg'></i>", "<i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i>", "<i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i>", "<i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i>", "<i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i>", "<i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i>", "<i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i>", "<i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i>", "<i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i>"]; 
    var ePlace=["<i class='fa fa-star-o fa-lg'></i>", "<i class='fa fa-star-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i>", "<i class='fa fa-star-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i>", "<i class='fa fa-star-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i>", "<i class='fa fa-star-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i>", "<i class='fa fa-star-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i>", "<i class='fa fa-star-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i>", "<i class='fa fa-star-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i>", "<i class='fa fa-star-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i>", "<i class='fa fa-star-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i><i class='fa fa-moon-o fa-lg'></i>"]; 
    var tensPlace=['dummy', '<i class="fa fa-star-o fa-lg"></i>', '<i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i>', '<i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i>', '<i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i>', '<i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i>', '<i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i>', '<i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i>', '<i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i>', '<i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i><i class="fa fa-star-o fa-lg"></i>' ]; 
    var hundredsPlace=['dummy', '<i class="fa fa-sun-o fa-lg"></i>', '<i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i>', '<i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i>', '<i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i>', '<i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i>', '<i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i>', '<i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i>', '<i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i>', '<i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i><i class="fa fa-sun-o fa-lg"></i>']; 

    var iWordsLength=numReversed.length; 
    var totalWords=""; 
    var inWords=new Array(); 
    var finalWord=""; 
    j=0; 
    for(i=0; i<iWordsLength; i++){ 
     switch(i) 
     { 
     case 0: 
      if(actnumber[i]==0 || actnumber[i+1]==1) { 
       inWords[j]=''; 
      } 
      else { 
       inWords[j]=iWords[actnumber[i]]; 
      } 
      inWords[j]=inWords[j]+''; 
      break; 
     case 1: 
      tens_complication(); 
      break; 
     case 2: 
      if(actnumber[i]==0) { 
       inWords[j]=''; 
      } 
      else if(actnumber[i-1]!=0 && actnumber[i-2]!=0) { 
       inWords[j]=hundredsPlace[actnumber[i]]+''; 
      } 
      else { 
       inWords[j]=hundredsPlace[actnumber[i]]+''; 
      } 
      break; 
     case 3: 
      if(actnumber[i]==0 || actnumber[i+1]==1) { 
       inWords[j]=''; 
      } 
      else { 
       inWords[j]=iWords[actnumber[i]]; 
      } 
      if(actnumber[i+1] != 0 || actnumber[i] > 0){ 
       inWords[j]=inWords[j]+" Thousand"; 
      } 
      break; 
     case 4: 
      tens_complication(); 
      break; 
     case 5: 
      if(actnumber[i]==0 || actnumber[i+1]==1) { 
       inWords[j]=''; 
      } 
      else { 
       inWords[j]=iWords[actnumber[i]]; 
      } 
      if(actnumber[i+1] != 0 || actnumber[i] > 0){ 
       inWords[j]=inWords[j]+""; 
      } 
      break; 
     case 6: 
      tens_complication(); 
      break; 
     case 7: 
      if(actnumber[i]==0 || actnumber[i+1]==1){ 
       inWords[j]=''; 
      } 
      else { 
       inWords[j]=iWords[actnumber[i]]; 
      } 
      inWords[j]=inWords[j]+" Crore"; 
      break; 
     case 8: 
      tens_complication(); 
      break; 
     default: 
      break; 
     } 
     j++; 
    } 

    function tens_complication() { 
     if(actnumber[i]==0) { 
      inWords[j]=''; 
     } 
     else if(actnumber[i]==1) { 
      inWords[j]=ePlace[actnumber[i-1]]; 
     } 

     else if (actnumber[i]==2) { 
      inWords[j]=ePlace[actnumber[i-2]]; 
     } 

     else { 
      inWords[j]=tensPlace[actnumber[i]]; 
     } 


    } 
    inWords.reverse(); 
    for(i=0; i<inWords.length; i++) { 
     finalWord+=inWords[i]; 
    } 
    document.getElementById('container').innerHTML=finalWord; 
} 

Благодарности

Answer 1

я создал ручку, которая может быть то, что вы ищете.

Мое решение позволяет создавать несколько полей ввода в html.

HTML, используемый в моем решении выглядит следующим образом:

<div> 
    <input type="text" name="score" value="10" /> 
    <div class="container"></div> 
</div> 
<div> 
    <input type="text" name="score" value="25" /> 
    <div class="container"></div> 
</div> 
<div> 
    <input type="text" name="score" value="5" /> 
    <div class="container"></div> 
</div> 
<div> 
    <input type="text" name="score" value="7" /> 
    <div class="container"></div> 
</div> 
<br/> 
<input type="button" name="sr1" value="Click Here" onClick="go()" /> 

При нажатии на кнопку. Функция jquery «каждый» будет зацикливать все эти поля ввода и выполнить код, который вы написали уже для каждого из них.

function go() { 
    $("input[name=score]").each(function() { 
    test_skill($(this)); 
    }); 
} 

Вышеуказанная функция вызовет вашу функцию test_skill для каждого окна ввода и передаст поле ввода в качестве параметра.

Теперь измените вашу функцию test_skill, чтобы использовать значение из поля ввода, переданного в качестве параметра.

function test_skill(input) { 
    var junkVal = input.val(); 
    // some more code you wrote already 
} 

Наконец, нам нужен элемент 'container' для отображения результата для каждого поля ввода. Использование HTML я предоставил, мы можем найти правильный контейнер DIV и залейте его результатом с этим кодом:

function test_skill(input) { 
// more code here 
// replace your last line of test_skill with the line below 
input.parent().find(".container").html(finalWord); 
} 

Вы можете увидеть результат в этой ручке: http://codepen.io/thdk/pen/pydpGN?editors=1010

Я надеюсь, что это может помочь вам.