页面加载后如何更改输入值？答案

【问题标题】：How to Change value of input after page loads?页面加载后如何更改输入值？
【发布时间】：2020-06-08 23:13:18
【问题描述】：

我使用范围选择器（进度条）从客户那里获取测量值。我已将它的限制设置为 1 到 50，因此如果用户不选择它，默认情况下它需要 1 个值，并且用户可以在不选择范围选择器的情况下将产品添加到购物车。有什么方法可以让我们在使用 javascript（无 jQuery）的页面加载时将默认值更改为不允许用户将产品添加到购物车的内容。

链接：https://cutt.ly/nrB4PAR

我现在正在使用此代码，但它不起作用。我希望 value 为 null。

<script type="text/javascript" language="javascript">
    debugger;

    var range_val = document.getElementById("tmcp_range_1").value;
    if (range_val == 1)
        {
         document.getElementById("tmcp_range_1").value = "";
        }
    
</script>

更新：

【问题讨论】：

我认为你不应该像你的例子那样改变它。首先，如果您想在页面加载时加载值 22，您应该更改 HTML 中的 value 属性，但是当您想触发更改某些操作的默认值时，您需要将此函数固定到某种事件。你的函数的问题是你没有在任何地方初始化它，但逻辑似乎是正确的。
我希望它为空。
对不起，我不明白。你想在你的范围输入上默认有null 值吗？你给我们展示了一个默认将值改为22的例子，所以我现在一头雾水，不知道你想达到什么效果。
我希望它为空
您不能将空值设置为输入。

标签： javascript wordpress woocommerce plugins wordpress-theming

【解决方案1】：

我不确定我是否真的理解你为什么需要这个，但你必须把代码放在一个函数中，然后调用一个事件监听器。

function changeVal() {
  var range_val = document.getElementById("tmcp_range_1").value;
  if (range_val == 1) {
    document.getElementById("tmcp_range_1").value = "22";
  }
}

window.addEventListner("load", changeVal);

【讨论】：

不，它不起作用，它没有将值更改为 22
我想这取决于您为事件侦听器选择的目标元素。我在示例中设置了window，但您可以尝试其他解决方案。您在开发者控制台中得到了什么？

【解决方案2】：

在 DOM 加载后更新输入值会改变值。

function updateVal() {
    var range_val = document.getElementById("tmcp_range_1").value;
    if (range_val == 1) {
        document.getElementById("tmcp_range_1").value = "22";
    }
}
window.addEventListner("load", updateVal);

您还需要更改 noUiSlider 逻辑来更新 UI。参考链接https://refreshless.com/nouislider/slider-read-write/

【讨论】：

您粘贴了与下面相同的示例，作者告诉他此解决方案不适用于他的情况。