So I currently have some HTML code for a button which is supposed to save data in local storage.
here is a section of it
<div class="col-lg-6">
<h2>Drinks<span class="label label-default"></span></h2>
<form id="drinks" class="form" role="inputs" >
<div class="input-group-lg col-xs-12">
<input type="text" class="form-control form-drinks" placeholder="Alcohol">
</div>
<div class="input-group-lg col-xs-12">
<input type="text" class="form-control form-drinks" placeholder="Alcohol">
</div>
<div class="input-group-lg col-xs-12">
<input type="text" class="form-control form-drinks" placeholder="Alcohol">
</div>
<button type="expand" class="btn btn-default" id = "btnsave">Add more...</button>
</form>
</div>
The button has the id "btnsave" and it is later called upon by this piece of javascript:
<script type="text/javascript" src="../../Website/json/modeizr.js">
function store() {
if (Modeizr.localstorage) {
// window.localStorage is available!
var drinksElement = document.getElementById("drinks");
for (var i = 0; i < drinksElement.length; i++) {
console.log("box" + i + ", " + drinksElement[i].value);
localStorage.setItem("box" + i, drinksElement[i].value);
}
} else {
// no native support for HTML5 storage :(
}
}
document.getElementById("btnsave").addEventListener("click", store);
</script>
Except in my browser window, when the button is clicked, the data is not updated. (I test it using this piece of code in the developer tools area of google chrome:
console.log("local storage");
for(var key in localStorage){
console.log(key + "=[" + localStorage.getItem(key) + "]");
}
)
I know the function is written correctly because if I input it in the console in google chrome, it goes through, then clicking on the button afterwards will update local storage with the correct data. However, if I do not put the function in console first, the data is stuck on the old data. Thanks in advance.
