Sitzungsspeicherzähler

Question

Ich möchte ein einfaches Counterscript machen, das einen Zahlenwert für einen Textwert (zB gut - 1, mittel - 2, ausgezeichnet - 3) zuweist, nachdem ich diesen Wert in der. Speichern möchte Sitzungsspeicher und nach einem Neuladen der Seite möchte ich die Zählung vom vorherigen Ergebniswert fortsetzen.

Ich habe das Counter-Skript und die HTML, aber ich konnte den vorherigen Wert nicht wiederherstellen und die Zählung fortsetzen. Hier ist das Skript:

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

ich folgende HTML verwenden:

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

Also im Grunde würde Ich mag die Mittel (2) Taste auswählen wird es zwei „Punkte“ gibt den Sitzungsspeicher, und nachdem ich die Seite aktualisiert habe, wird der Zähler "2" anzeigen und ich würde den Good (3) Button drücken und nach dem zweiten Refresh sollte der Counter "5" anzeigen. Es ist ein bisschen kompliziert, aber ich blieb stecken.

Irgendeine Idee?

Answer 1

Aus irgendeinem Grund hat dies einen Skriptfehler, wenn es über den Code-Snippet von Stack Overflow gepostet wird, also habe ich JSFiddle verwendet.

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();