local und größer als und kleiner als mit Slider

Question

Ich habe einen Schieber und ich möchte es machen, so dass auf eine Taste drücken -

Wenn eine Variable (Rangevalue) einen Wert von 1-50 hat, dann eine weitere Variable (chanceofdeath) einen Wert von 1.

Wenn eine Variable (Rangevalue) einen Wert von 51-100 hat, dann eine andere Variable (chanceofdeath) einen Wert von 2.

Dies ist, was ich habe: https://jsfiddle.net/kzyffz9v/2/

Obwohl es im Absatz NaN druckt . Ist es ein Problem mit localStorage, oder die Größer als und weniger als Aussagen? Bitte korrigieren Sie meinen Code.

Answer 1

Verschieben Sie die Wertinitialisierung in die Funktion, anstatt sie im Inline-Ereignishandler zu verwenden.

Stellen Sie außerdem sicher, dass Sie die Variable im lokalen Speicher festlegen.

HTML

onchange="my2Function()"> 

JS

function my2Function(){ 

    var rangeValue = parseInt(this.value, 10); 

    if (rangeValue < 50 && x > 0){ 
     chanceofdeath +=1; 
    } 

Check Fiddle

bearbeiten

localStorage.setItem("chanceofdeath", 23); 
var chanceofdeath = parseInt(localStorage.getItem("chanceofdeath"), 10); 
var inputElement = document.querySelector('.range-input'); 
var submitElement = document.querySelector('.submit'); 
var x = 2; 

submitElement.addEventListener('click', function() { 
    document.getElementById('paragraph').innerHTML = chanceofdeath; 
    localStorage.setItem("chanceofdeath", chanceofdeath); 
}); 

inputElement.addEventListener('change', function() { 
    var rangeValue = parseInt(this.value, 10); 
    chanceofdeath = chanceofdeath || 0; 
    if (rangeValue < 50 && x > 0) { 
    chanceofdeath += 1; 
    } 
    if (rangeValue < 100 && x > 49) { 
    chanceofdeath += 2; 
    } 
}); 

Edited Fiddle