javascript - Session storage counter -

i make simple counter script, assign number value text value (e.g. - 1, moderate - 2, excelent - 3), after store value in session storage , after page reload, continue counting previous result value.

i have counter script, , html couldn't restore previous value , continue counting. here script:

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;  } 

i use following html:

    <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"/> 

so select moderate (2) button give 2 "points" session storage, , after refresh page, counter show "2" , hit (3) button , after second refresh counter should show "5". little bit complicated got stuck.

any idea?

for reason, has script error when posting via stack overflow's code snippet used 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]'); (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();