javascript - How to keep a variables value outside of the function? -
i have following 2 functions take input drop down menu using onchange
<script> current_fin = "none"; current_mat = "pine"; // pass current selection variable 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>
all write value of selected div #price. problem arises when change 1 , other. if switch between 2 boxes variables revert default value none , pine. want them retain value outside of function, if switch box 1 oak stays until switch back. have feeling have scope problems here don't know how proceed. i'll include html reference.
<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 cart"> <div id=price> </div>
<script> var current_fin = "none"; var current_mat = "pine"; // pass current selection variable 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); }
when write var current_mat
inside function, overrides global current_mat
.
Comments
Post a Comment