Местное хранилище для увеличения затрат - PullRequest
Новая
       19

Местное хранилище для увеличения затрат

0 голосов
/ 10 марта 2019

Я использую Phonegap для создания приложения, которое позволяет пользователю записывать, какие упражнения они выполняли в тренажерном зале.Сейчас я использую LocalStorage для сохранения данных для каждого нового <'table'> или <'tr'>, которое создается после нажатия «addTableExersice» / «addTableRow», но я получаю результат только для первой строки в первой таблице,Как это исправить?

HTML: 

<tr style="color:white">
        <td class="set">1</td>
        <td><input class="inputGoal" id="goal-1" type="number" placeholder="x"></input><div class="testGoal" id="testGoal-1"></div></td>
        <td><input class="inputAchieved" id="achieved-1" type="text" placeholder="kg * reps"></input><div class="testAchieved" id="testAchieved-1"></div> </td>
    </tr>

JS: 

function addTableRow(id, set)
{
  var goalResult = document.getElementById('goal-1').value;
  localStorage.setItem("goal", goalResult);
  document.getElementById('testGoal-1').innerHTML = localStorage.getItem("goal");
  document.getElementById('testGoal-1').style.visibility = "visible";
  document.getElementById('goal-1').style.visibility = "hidden";
  //-----------------------------------------------------------
  var achievedResult = document.getElementById('achieved-1').value;
  localStorage.setItem("achieved", achievedResult);
  document.getElementById('testAchieved-1').innerHTML = localStorage.getItem("achieved");
  document.getElementById('testAchieved-1').style.visibility = "visible";
  document.getElementById('achieved-1').style.visibility = "hidden";
  //-----------------------------------------------------------
    document.getElementById('table-' + id).innerHTML += '<tr style="color:white"><td class="set">'+set+'</td><td><input class="inputGoal" id="goal-'+set+'" type="number" placeholder="x"></input><div class="testGoal" id="testGoal-'+set+'"></div></td><td><input class="inputAchieved" id="achieved-'+set+'" type="text" placeholder="kg * reps"></input><div class="testAchieved" id="testAchieved-'+set+'"></div> </td></tr>';
    document.getElementById('table-plus-set-' + id).onclick = function() { addTableRow(id, set + 1); };
}

CSS: 

.set
{
 color:orange;
 position: relative;
}
.inputGoal
{
 text-align:center;
 position: relative;
}
.testGoal
{
  position: relative;
  text-align: center;
  visibility: hidden;
  border-bottom: 1px solid white;
}
.inputAchieved
{
  text-align: center;
  position: relative;
}
.testAchieved
{
  position: relative;
  visibility: hidden;
  border-bottom: 1px solid white;
  text-align: center;
}

Заранее спасибо!

...