将 javascript 变量更改为 html 表单字段中的值

2023-11-30

我正在尝试为通过 html 表单字段然后单击按钮更改的变量分配一个新值。另外,我希望更改的变量在 html 文件中更新,这样如果我刷新页面,新变量仍然存在,并且不会被原始变量替换

变量 beforenoonprice 是一个全局变量

html

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

javascript

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

    } 

正如 Mritunjay 提到的,你最初的问题是使用value()代替value.

关于重置,我很好奇如何防止 JavaScript 中的值重置,并提出了一个问题:防止刷新时重置输入值

它可以应用到您自己的代码中,如下所示:

<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>

要使其在浏览器关闭然后打开时保持该值,请改用 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 javascript 变量更改为 html 表单字段中的值 的相关文章

  • 为任何更新查询增加 Mongoose 文档版本的简单方法?

    我想开始利用 Mongooses 文档版本控制 v key 我在实际增加版本值时遇到了问题 然后我发现您必须添加this increment 执行查询时 有没有办法自动递增 目前 我只是将其添加到pre用于更新类型查询的中间件 module
  • AJAX 安全问题

    我希望能够解决一些关于 AJAX 安全性的问题 这是我试图理解的一个场景 假设我正在使用 AJAX 向页面请求一些半敏感材料 例如 我将把用户的 ID 传递给一个 php 文件 并返回一些关于他们自己的信息 现在 是什么阻止人们模拟此 Ja
  • 我可以通过什么方式混合 jQuery 和 vanilla JavaScript

    我有一个用普通 JavaScript 编写的 Web 应用程序 我想用 jQuery 动画来增强它 并使用我在各种 jQuery 插件中找到的一些功能 例如上传 http www uploadify com 可以通过什么方式将 jQuery
  • 为什么省略分号会破坏这段代码?

    或者换句话说 为什么分号插入失败 导致下面的代码被破坏 function Foo Foo prototype bar function console log bar lt missing semicolon function Foo pr
  • 在有限的上下文中运行 JS 代码

    我正在尝试奔跑trusted 隔离 上下文中的 JS 代码 基本上想出了这个方法 function limitedEval src context return function with this return eval src call
  • Javascript 对象属性名称

    在 C 中 可以将对象属性的名称作为字符串值获取 名称 对象 Property gt myProperty 这可以在 Javascript Typescript 中完成吗 Object Keys 是我找到的唯一东西 但它给了我所有的键 示例
  • jQuery:查找具有特定自定义属性的元素

    我只想找到具有特定自定义属性值的元素 例如 我想找一个div其具有属性data divNumber 6 var number 6 var myDiv data divNumber number 我尝试使用http api jquery co
  • 如何在React Native的MapView中设置标记

    我想在React Native中的MapView上设置一个标记 但是通过官方文档找不到任何信息MapView https facebook github io react native docs mapview html content 如
  • 从选择 onChange 调用 javascript 函数 [重复]

    这个问题在这里已经有答案了 所以我有一个简单的 HTML 选择框和一个 javascript 警报功能 我希望选择框有一个 onchange 事件来调用 javascript 警报函数 这是我到目前为止所拥有的 HTML div Type
  • 检测 Webkit/Chrome 中 HTML5 数字控件更改的事件?

    HTML5 为我们提供了一些新的输入元素 例如
  • 将时间戳转换为一个数组

    在应用程序脚本 谷歌表中运行 我从 API 获取时间戳并返回此结果 1 6370611672429312E18 1 63706107263277082E18 我执行此代码并且工作正常 但问题不在数组中 我每次都需要它在数组中 const t
  • 如何将一个数组中的所有项目复制到另一个数组中?

    如何将数组的每个元素 其中元素是对象 复制到另一个数组中 以便它们完全独立 我不想更改一个数组中的元素来影响另一个数组 这里的关键是 数组中的条目是对象 并且 您不希望对一个数组中的对象的修改显示在另一个数组中 这意味着我们不仅需要将对象复
  • 使用javascript以编程方式触发iOS safari中的复制菜单?

    我正在尝试实现一种用户友好的方式 将一些文本从文本输入字段复制到 iOS Safari 上的剪贴板 我知道无法在这个平台上以编程方式完成此操作 但我希望能够尽可能地指导用户体验 在 iOS Safari 上 当用户手动突出显示某些文本时 会
  • 通过 JavaScript 单击按钮/页面提交

    我想了解 asp net 框架如何知道何时单击了按钮 因此一旦收到请求 就会在服务器上触发其单击事件 我需要了解它是如何工作的 因为我想从 JavaScript 触发按钮的服务器单击事件 我能够从 JavaScript 执行页面提交 doc
  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • 从字节数组设置 img src

    我需要设置img src我在对象中拥有的字节数组的属性 img
  • 从网页运行 ClickOnce 应用程序,无需用户操作

    我们有一个基于 Java 的 Web 应用程序以及用 C 编写的相同应用程序 如果 java 检查器发现客户端计算机上没有安装 Java 则应该运行该应用程序 这个想法是运行 C 单击一次 http en wikipedia org wik
  • 如何解决“消息端口在收到响应之前已关闭”的问题。在 JavaScript 中的 window.location.reload() 之后

    我遇到了 javascript 问题 从 chrome v73 0 3683 86 开始 每当我在 window location reload 函数之后运行 javascript 代码时 它总是给我错误 Unchecked runtime
  • Three.js点击单个粒子

    In this example http jsfiddle net agqq96bq 2 您可以看到 2 个可点击的粒子 但它们都受到点击的影响 另外 我只想检测粒子上的点击 而不将它们过滤出场景 像这儿 if intersects len
  • 如果 POST 响应仅包含 ID,如何将数据保存到我的 Ember 存储?

    Ember 数据期望我的服务器在每次成功后返回完整的对象POST 但是 我的 API 只返回一种元对象 其中包含id 当 Ember 收到此对象时 记录中的现有数据将被删除 除了id 例如 当我这样做时 var asset App Asse

随机推荐