在Html中使用Js更改具有變數的范圍元素的值-有解無憂

我在任何地方都找不到這個問題的答案，所以就在這里。

在我的 html 中，我有一個滑塊，它的值從 0 到 10,000。僅僅通過它很難達到某個數字，所以我添加了幾個span使用onclick" "事件的元素，這些元素應該根據你按下的那個來增加/減少 1/10。為了讓它作業，我需要檢索滑塊的值，增加/減少 1/10，并更改滑塊的值。從標題來看，這個問題是我需要一個變數（至少我想），但是當我使用一個變數時，由于某種原因它會將它設定為最大值而沒有引號（“”）并且不會改變每當我使用它們時。這很令人困惑，因為它應該很簡單，但東西不起作用，我不明白為什么。這是我的完整代碼：

<!DOCTYPE HTML>
<html>
  <head>
    <title></title>
    <style>
      span {
        margin: 8px;
        font-size: 30px;
      }
      input[type="range"] {
        margin-top: 15px;
      }
    </style>
  </head>
  <body>
    <div style="text-align: center">
      <span onclick="downTen()"><<</span>
      <span onclick="downOne()">-</span>
      <input type="range" id="range" min="0" max="10000" oninput="this.nextElementSibling.value = this.value">
      <output>5000</output>
      <span onclick="upOne()"> </span>
      <span>>></span>
    </div>
    <script>
      function downTen() {
        let downDiez = document.getElementById("range").value;
        downDiez -= 10;
        document.getElementById("range").value = downDiez;
        console.log(document.getElementById("range").value);
      }
      function downOne() {
        let downUno = document.getElementById("range").value;
        downUno -= 1;
        document.getElementById("range").value = downUno;
        console.log(document.getElementById("range").value);
      }
      function upOne() {
        let upUno = document.getElementById("range").value;
        upUno  = 1;
        document.getElementById("range").value = upUno;
        console.log(document.getElementById("range").value);
      }
      function upTen() {
        
      }
    </script>
  </body>
</html>

請幫忙，因為我需要這個來為自己做一個有趣的專案，我給了自己一個截止日期。我希望這能解釋一切。

編輯：我已經意識到它適用于減法，但加法是錯誤的。

uj5u.com熱心網友回復：

使用像這個滑塊這樣的數字的輸入將它們的值存盤為字串而不是數字，因此您需要將其轉換為數字。你也有 upUno 作為 let 而 var 如果你要改變它更好。并且在嘗試更新滑塊值時在 upUno var 周圍加上引號。我已經在這里進行了更正。

    function upOne() {
    var upUno = Number(document.getElementById("range").value);
    upUno  = 1;
    document.getElementById("range").value = upUno;
    console.log(document.getElementById("range").value);
  }

uj5u.com熱心網友回復：

只需要在遞增之前將輸入轉換為數字：

function upOne() {
  const input = document.getElementById("range");
  const value = Number(input.value)   1;
  
  input.value = value;
  input.dispatchEvent(new InputEvent('input'));
}

<div style="text-align: center">
  <input type="range" id="range" min="0" max="10000" oninput="this.nextElementSibling.innerText = this.value">
  <output>5000</output>
  <span onclick="upOne()"> </span>
</div>

我還修復了您的事件處理程式并確保它被觸發。（雖然有更簡潔的方法來處理事件。）

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/536638.html

標籤：javascript网页格式变量范围

上一篇：直接從函式Python獲取變數

下一篇：DAX變數作用域