时间戳

首页 > 解决方案 > Javascript 主动刷新

javascript - Javascript 主动刷新

问题描述

我这里有一个应该刷新的数字，以防表单选择直接发生变化，没有按钮。例子：

        <div class="col">
          <label for="speicher3">SSD & HDD (3)</label>
          <select class="form-control" id="speicher3" name="speicher3">
            <option value="1">-</option>
            <option value="2">Samsung EVO 970 - 500GB (M.2 - SSD)</option>
            <option value="3">Samsung EVO 970 - 1TB (M.2 - SSD)</option>
            <option value="7">Corsair MP400 - 2TB (M.2 - SSD)</option>
            <option value="4">Datenplatte 1TB (HDD)</option>
            <option value="5">Datenplatte 2TB (HDD)</option>
            <option value="6">Datenplatte 3TB (HDD)</option>
          </select>
          </div>
          </div>

所以选项2在选择的时候我应该直接获取这个属性中的值2：

        <p id="preis" name="preis">
          Gesamtpreis:
          </p>

这就是功能，我不知道为什么间隔不起作用，我认为我做错了什么。也许有人知道为什么

var sum = 0;

setInterval(sum = document.getElementById("gpu").value,0.5);
setInterval(document.getElementById("preis").innerHTML = "Gesamtpreis: "  + sum,0.5);

标签： javascripthtml

解决方案

在处理 javascript 中的 setInterval() 函数和元素更改时，您必须知道一件重要的事情。永远不要使用 setInterval() 来达到你想要达到的结果。setInterval() 函数将在您的情况下每毫秒触发一次，并可能导致浏览器出现性能问题。如此处所述：https ://www.w3schools.com/jsref/met_win_setinterval.asp setInterval() 方法将继续调用该函数，直到调用 clearInterval() 或关闭窗口。

为了做你想做的事，在 select 上使用 onchange() 方法：

<select class="form-control" id="speicher3" name="speicher3" onchange="changePreis();">

在你的 javascript 中写：

<script>
    function changePreis(){
        var sum = 0;
        sum = document.getElementById("speicher3").value;
        document.getElementById("preis").innerHTML = "Gesamtpreis: "  + sum;
    }
</script>

另一件重要的事情（不要在这种特定情况下使用）。如果要使用 setInterval() 函数，则必须使用以下语法：

setInterval(function(){sum = document.getElementById("speicher3").value;},0.5);

看一些例子，比如 W3C 学校： https ://www.w3schools.com/jsref/event_onchange.asp

推荐阅读