Change javascript variable to value in html form field

Question

I'm trying to assign a new value to a variable that is changed via a html form field and then by clicking a button. Also I want the variable that changes to update in the html file so that if I refresh the page, the new variable is still present and not replaced with the original variable

The variable beforenoonprice is a global variable

html

  <input class="input-small" id="beforeNoonNPSlot" type="text">

javascript

function updatePricingFunction(){
     beforenoonprice = document.getElementById("beforeNoonNPSlot").value();

    } 

Answer 1

As Mritunjay mentioned, your original problem was using value() instead of value.

Regarding the resets, I became curious about how to prevent value resets in JavaScript myself and made a question: Prevent input value from resetting on refresh

It can be applied to your own code like this:

<input class="input-small" id="beforeNoonNPSlot" type="text">
<script>
    var myInput = document.getElementById("beforeNoonNPSlot");

    window.onload = function() {
        if (sessionStorage.getItem("autosave")) {
            myInput.value = sessionStorage.getItem("autosave");
            updatePricingFunction();
        }
    }

    myInput.addEventListener("keyup", function() {
        sessionStorage.setItem("autosave", myInput.value);
    });

    function updatePricingFunction() {
        beforenoonprice = myInput.value;
    }
</script>

To make this maintain the value if the browser is closed and then opened, instead use localStorage: https://developer.mozilla.org/en/docs/Web/Guide/API/DOM/Storage#localStorage

<input class="input-small" id="beforeNoonNPSlot" type="text">
<script>
    if (!window.localStorage) {
        Object.defineProperty(window, "localStorage", new (function() {
            var aKeys = [], oStorage = {};
            Object.defineProperty(oStorage, "getItem", {
                value: function(sKey) { return sKey ? this[sKey] : null; },
                writable: false,
                configurable: false,
                enumerable: false
            });
            Object.defineProperty(oStorage, "key", {
                value: function(nKeyId) { return aKeys[nKeyId]; },
                writable: false,
                configurable: false,
                enumerable: false
            });
            Object.defineProperty(oStorage, "setItem", {
                value: function(sKey, sValue) {
                    if (!sKey) { return; }
                    document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
                },
                writable: false,
                configurable: false,
                enumerable: false
            });
            Object.defineProperty(oStorage, "length", {
                get: function() { return aKeys.length; },
                configurable: false,
                enumerable: false
            });
            Object.defineProperty(oStorage, "removeItem", {
                value: function(sKey) {
                    if (!sKey) { return; }
                    document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
                },
                writable: false,
                configurable: false,
                enumerable: false
            });
            this.get = function() {
                var iThisIndx;
                for (var sKey in oStorage) {
                    iThisIndx = aKeys.indexOf(sKey);
                    if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
                    else { aKeys.splice(iThisIndx, 1); }
                    delete oStorage[sKey];
                }
                for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
                for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
                    aCouple = aCouples[nIdx].split(/\s*=\s*/);
                    if (aCouple.length > 1) {
                        oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
                        aKeys.push(iKey);
                    }
                }
                return oStorage;
            };
            this.configurable = false;
            this.enumerable = true;
        })());
    }

    var myInput = document.getElementById("beforeNoonNPSlot");

    window.onload = function() {
        if (localStorage.getItem("autosave")) {
            myInput.value = localStorage.getItem("autosave");
            updatePricingFunction();
        }
    }

    myInput.addEventListener("keyup", function() {
        localStorage.setItem("autosave", myInput.value);
    });

    function updatePricingFunction() {
        beforenoonprice = myInput.value;
    }
</script>