Изменение значения переменной с помощью кнопок радиосвязи

Question

Я хочу, чтобы переменная (chanceoflive) была , хранящаяся с localStorage. Затем у меня есть переключатели. Я хочу, чтобы в зависимости от того, какой переключатель выбран, переменная chanceoflive будет изменена. Это то, что у меня есть:

var chanceoflive = 0; 
 
var user; 
 
function choose(choice){ 
 
    user = choice; 
 
} 
 

 
function changechanceoflive(){ 
 
    if (user == brick) { 
 
     chanceoflive += 1; 
 
    } 
 
    else if (user == wood) { 
 
     chanceoflive +=3 
 
    } 
 
    else if (user == stone) { 
 
     chanceoflive +=2 
 
    } 
 
    localStorage.setItem("chanceoflive", chanceoflive); 
 
} 
 

 
function test(click){ 
 
    alert(chanceoflive); 
 
}

<div id="radiobuttons" class="container" name="buttons" align=center> 
 

 
    <h2>I Want my Building to be Made of:</h2> 
 

 
    <ul> 
 
    <li> 
 
     <input type="radio" id="brick-option" name="material" value="1" onClick="choose('Bricks')"> 
 
     <label for="brick-option">Bricks</label> 
 

 
     <div class="check"></div> 
 
    </li> 
 

 
    <li> 
 
     <input type="radio" id="wood-option" name="material" value="3" onClick="choose('Wood')"> 
 
     <label for="wood-option">Wood</label> 
 

 
     <div class="check"> 
 
     <div class="inside"></div> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <input type="radio" id="stone-option" name="material" value="2" onClick="choose('Stone')"> 
 
     <label for="stone-option">Stone</label> 
 

 
     <div class="check"> 
 
     <div class="inside"></div> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<form action="chooseheight.html"> 
 
    <div class="wrapper"> 
 
    <button class="button" onClick="test();changechanceoflive()" align=center>Submit</button> 
 
    </div> 
 
</form>

Хотя, это всегда просто оповещает 0. Это проблема с LocalStorage или что-то еще?

Answer 1

Я установил код:

<ul> 
<li> 
    <input type="radio" id="brick-option" name="material" value="1" onClick="choose('bricks')"> 
    <label for="brick-option">Bricks</label> 

    <div class="check"></div> 
</li> 

<li> 
    <input type="radio" id="wood-option" name="material" value="3" onClick="choose('wood')"> 
    <label for="wood-option">Wood</label> 

    <div class="check"> 
    <div class="inside"></div> 
    </div> 
</li> 

<li> 
    <input type="radio" id="stone-option" name="material" value="2" onClick="choose('stone')"> 
    <label for="stone-option">Stone</label> 

    <div class="check"> 
    <div class="inside"></div> 
    </div> 
</li> 

JS

var chanceoflive = 0; 
var user; 
function choose(choice){ 
    user = choice; 
} 

function changechanceoflive(){ 
    if (user == 'bricks') { 
     chanceoflive += 1; 
    } 
    else if (user == 'wood') { 
     chanceoflive +=3 
    } 
    else if (user == 'stone') { 
     chanceoflive += 2 
    } 
    localStorage.setItem("chanceoflive", chanceoflive); 
} 

function test(click){ 
    alert(chanceoflive); 
    alert(localStorage.chanceoflive); 
} 

Но с вашим кодом, если пользователь перезагрузить страницу, а затем не выбрать любого радио, переменная localStorage будет сброшена на 0, потому что у вас есть

var chanceoflive = 0;

Если вы хотите сохранить последнее сохраненное значение, необходимо заменить эту строку на:

вар chanceoflive = localStorage.chanceoflive;

Answer 2

Чтобы ответить на вашу часть о LocalStorage, просто установите/получите переменные как обычный Javascript-объект. Более подробная информация: mrkdown.io/t32iomd