2013-04-09 6 views
0

У меня есть две функции, которые принимают входные данные из выпадающего меню с помощью OnChangeКак сохранить значение переменных вне функции?

<script> 

current_fin = "none"; 
current_mat = "Pine"; 



// Pass the current selection into a variable to use. 
function getMaterial() 
{ 
    var mat = document.getElementById("dropdownone"); 
    var current_mat = mat.options[mat.selectedIndex].text; 
$("#price").html("Material is: " + current_mat + "<br/>" +"Finish is: " + current_fin); 
} 
function getFinish() 
{ 
    var fin = document.getElementById("dropdowntwo"); 
    var current_fin = fin.options[fin.selectedIndex].text; 
$("#price").html("Material is: " + current_mat + "<br/>" +"Finish is: " + current_fin); 
} 
</script> 

Все это делает записать значение того, что было выбрано в сНу #price. Теперь проблема возникает, когда я меняю один, а затем другой. Если я переключаюсь между двумя полями, переменные возвращаются к их значению по умолчанию none и pine. Я хочу, чтобы они сохранили значение вне функции, поэтому, если я переключу коробку 1 на дуб, она останется такой, пока я не верну ее обратно. У меня такое чувство, что у меня проблемы с прицелом, но я не знаю, как это сделать. Я буду включать HTML для справки.

<select name="material" id="dropdownone" onchange="getMaterial()"> 
    <option>Pine</option> 
    <option>Oak</option> 
    <option>Walnut</option> 
    <option>Plastic</option> 
</select> 

<select name="finish" id="dropdowntwo" onchange="getFinish()"> 
    <option>None</option> 
    <option>Finished</option> 
</select> 

<input type="submit" value="Submit To Cart"> 


<div id=price> 

</div> 

ответ

3
<script> 

    var current_fin = "none"; 
    var current_mat = "Pine"; 


    // Pass the current selection into a variable to use. 
    function getMaterial() 
    { 
     var mat = document.getElementById("dropdownone"); 
     current_mat = mat.options[mat.selectedIndex].text; 
     $("#price").html("Material is: " + current_mat + "<br/>" +"Finish is: " + current_fin); 
    } 

    function getFinish() 
    { 
     var fin = document.getElementById("dropdowntwo"); 
     current_fin = fin.options[fin.selectedIndex].text; 
     $("#price").html("Material is: " + current_mat + "<br/>" +"Finish is: " + current_fin); 
    } 

Когда вы пишете var current_mat внутри функции, он переопределяет глобальный current_mat.

+0

Вау, большое вам спасибо! Я не понимал, что это так. –

0
<!DOCTYPE html> 
<html> 
<head> 

<script> 

current_fin = "none"; 
current_mat = "Pine"; 

function getMaterial() 
{ 
var mat = document.getElementById("dropdownone"); 
var current_mat = mat.options[mat.selectedIndex].text; 
var fin = document.getElementById("dropdowntwo"); 
var current_fin = fin.options[fin.selectedIndex].text; 
document.getElementById("price").innerHTML="Material is: " + current_mat + "<br/>" +"Finish is: " + current_fin; 
} 
function getFinish() 
{ 
var fin = document.getElementById("dropdowntwo"); 
var current_fin = fin.options[fin.selectedIndex].text; 
var mat = document.getElementById("dropdownone"); 
var current_mat = mat.options[mat.selectedIndex].text; 
document.getElementById("price").innerHTML="Material is: " + current_mat + "<br/>" +"Finish is: " + current_fin; 
} 


    </script> 
    </head> 
    <body> 

    <select name="material" id="dropdownone" onchange="getMaterial()"> 
    <option>Pine</option> 
    <option>Oak</option> 
    <option>Walnut</option> 
    <option>Plastic</option> 
    </select> 

    <select name="finish" id="dropdowntwo" onchange="getFinish()"> 
     <option>None</option> 
     <option>Finished</option> 
    </select> 

    <input type="submit" value="Submit To Cart"> 

    <div id="price"> 

    </div> 

    </body> 
    </html> 
Смежные вопросы