セッション格納カウンタ

Question

私は、テキスト値に数値を割り当てる簡単なカウンタスクリプトを作成したいと考えています（例：good-1、moderate-2、excelent-3）。私は以前の結果値からのカウントを続けたいと思います。

私はカウンタスクリプトとHTMLを持っていますが、以前の値を復元してカウントを続けることができませんでした。私は、次のHTMLを使用

function modify_qty(val) { 
    var qty = document.getElementById('qty').value; 
    var new_qty = parseInt(qty,10) + val; 

    if (new_qty < 0) { 
     new_qty = 0; document.getElementById('qty').value = new_qty; 
     document.getElementById("result").value = sessionStorage.getItem("qty"); 
     document.getElementById("result").innerHTML = sessionStorage.getItem("qty"); 
    } 

    document.getElementById('qty').value = new_qty; 
    return new_qty; 
} 

：ここではスクリプトです

<table id="main"> 

      <tr> 
       <td><button id="up" onclick="modify_qty(1)">Poor</button> </td> 
       <td><button id="up" onclick="modify_qty(2)">Moderate</button></td> 
       <td><button id="up" onclick="modify_qty(3)">Good</button></td> 
       <td><button value="Refresh Page" onClick=" sessionStorage.qty = qty.value; window.location.reload();">Reload</button></td> 
       <td><button value="Clear" onClick="sessionStorage.clear (result);window.location.reload();">Clear</button></td> 
      </tr> 
     </table> 
    </div><br><br><br><br><br><br><br> 

     <div class="box">  
       <input id="qty" type="text" value="0" /> 
       <input id="result" value="0"/> 

だから基本的に私はそれがセッションストレージに2「ポイント」を与える穏健派（2）ボタンを選択したいと思いますが、ページをリフレッシュした後、カウンタは「2」を表示し、Good（3）ボタンを押すと、2回目のリフレッシュ後にカウンタに「5」が表示されます。その少し複雑ですが、私は立ち往生しました。

Answer 1

なんらかの理由で、これはStack Overflowのコードスニペットを介して投稿するときにスクリプトエラーが発生するため、JSFiddleを使用しました。

https://jsfiddle.net/kqexbhmo/

<div class="container"> 
    <h3>Example</h3> 

    <div data-score="1">good</div> 
    <div data-score="2">moderate</div> 
    <div data-score="3">excellent</div> 
    <div id="reset">reset</div> 
    <div id="score"></div> 
</div> 



var votes = document.querySelectorAll('[data-score]'); 
for (var ix = 0; ix < votes.length; ix++) { 
    votes.item(ix).addEventListener('click', function() { 
    localStorage.setItem('score', getScore() + parseInt(this.dataset.score, 10)); 
    showScore(); 
    }); 
} 

document.getElementById('reset').addEventListener('click', function() { 
    localStorage.removeItem('score'); 
    showScore(); 
}); 

function getScore() { 
    return parseInt(localStorage.getItem('score') || 0, 10); 
} 

function showScore() { 
    document.getElementById('score').innerText = getScore(); 
} 

showScore();