JavaScript object methods and working with the <input> values

Question

Im working on a custom stopwatch in JavaScript that will run offline. And trying to implement some basic settings that will be saved in HTML5 localStorage (or using default values if localStorage is not saved yet).

So I have settings.html window that will hold all the inputs:

<html>
<head>
<title>OS Stopky - Settings</title>
<link rel="stylesheet" type="text/css" href="osstopky.css">
<script type="text/javascript" src="settings.js"></script>
</head> 
<body>
<div class="settingswrapper">
<br>
<table id="settingstable">
<tr>
<td>Counter font size</td>
<td><input type="text" id="settCounterSize" size="5" > [px]</td>
</tr>
</table>
</div>
<script>
Settings.load();
</script>
</body>
</html>

And in the settings.js I tried to create the object to hold the settings and work with them:

var Settings = {
    settCounterSize: 66,
    load: function() {
        if (localStorage.settCounterSize) {
            document.getElementById("settCounterSize").value = localStorage.settCounterSize;
        } else {
            document.getElementById("settCounterSize").value = this.settCounterSize;
        }
    },
    save: function() {
        localStorage.settCounterSize =  document.getElementById("settCounterSize").value;           
    },
    loadDefaults: function() {

    }
};

However, once the settings.html page loads, the input field "settCounterSize" remains blank.

I think I need fresh pair of eyes for this, been stuck with this seemingly simple call for several hours, reading the W3 Schools and Javascript html call external object from external file I couldnt find where my problem lies..

Thank you for your time!

Yes, there was. I didnt even realize there was a JS console in the Chrome, I just used Notepad++ before you mentioned it.. Anyways, there was a error in the object declaration in the part I did not paste.. var Settings = { settCounterSize: 66, settCounterColor: ,... and several others which I did not assign a defaut value to, and it was causing errors. Thank you for pointing me in the right direction :) — LyrickCZE
– LyrickCZE, Commented Jan 26, 2015 at 13:15

Maksim Luzik · Accepted Answer · 2015-01-26 12:40:56Z

What kind of browser do you use, and which version? For me it seems to work. Check this jsfiddle: http://jsfiddle.net/08ca8hau/

Also as the guys commented, check any console errors and paste them here if any.

var Settings = {
    settCounterSize: 66,
    load: function() {
        if (localStorage.settCounterSize) {
            document.getElementById("settCounterSize").value = localStorage.settCounterSize;
        } else {
            document.getElementById("settCounterSize").value = this.settCounterSize;
        }
    },
    save: function() {
        localStorage.settCounterSize =  document.getElementById("settCounterSize").value;           
    },
    loadDefaults: function() {

    }
};

Settings.load();

<table id="settingstable">
<tr>
<td>Counter font size</td>
    <td><input type="text" id="settCounterSize" size="5" /> [px]</td>
</tr>
</table>

Collectives™ on Stack Overflow

JavaScript object methods and working with the <input> values

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related