如何使用JS增加范圍輸入-有解無憂

我想根據輸入欄位值增加我的范圍欄。

如果有人在輸入欄位 1 中給他們一些值，然后在輸入欄位 2 中給他們一些值，在一個變數中，兩個值都會相加，然后將其值推送到<input type="range" id="ran"/>.

function ra() {
  var a = document.getElementById('ss');
  if (a.style.display == "none") {
    a.style.display = "block";

  } else if (a.style.display == "block") {
    a.style.display = "none";
  }

}

function ss() {
  var x = parseInt(document.getElementById("myText").value); //value of input field 1 store in x

  var c = parseInt(document.getElementById("my").value) //value of input field 2 store in c


  var r = parseInt(console.log(x   c)) //Now both values are added

  //Now I want to push the value of *r* in type="range"

  var test = r;
  document.getElementById("ran").value = test;
}

body {
  background-color: black;
  color: white;
}

<form>
  <input type="checkbox" name="ABA" onclick="ra()" value="Applied Behaviour Analysis">Applied Behaviour Analysis
  <div id="ss" style="display: none;">
    <input type="number" id="myText" value="">
    <input type="number" id="my" value="">
    <button onclick="ss()">calculate</button>
    <input type="range" id="ran" value="0">
  </div>
</form>

uj5u.com熱心網友回復：

首先，console.log()不會回傳值。

二、根據MDN

該值不會小于 min。默認值為 0。該值不會大于最大值。默認值為 100。

如果不設定最大值。輸入 1 輸入 2 超過 100 將被設定為 100input.value

function ra() {
  var a = document.getElementById('ss');
  if (a.style.display == "none") {
    a.style.display = "block";

  } else if (a.style.display == "block") {
    a.style.display = "none";
  }

}

function ss() {
  var x = parseInt(document.getElementById("myText").value); //value of input field 1 store in x

  var c = parseInt(document.getElementById("my").value) //value of input field 2 store in c


  var r = x   c //Now both values are added

  console.log(r)

  //Now I want to push the value of *r* in type="range"

  var test = r;
  document.getElementById("ran").value = test;
}

body {
  background-color: black;
  color: white;
}

<form>
  <input type="checkbox" name="ABA" onclick="ra()" value="Applied Behaviour Analysis">Applied Behaviour Analysis
  <div id="ss" style="display: none;">
    <input type="number" id="myText" value="">
    <input type="number" id="my" value="">
    <button onclick="ss()">calculate</button>
    <input type="range" id="ran" value="0">
  </div>
</form>

uj5u.com熱心網友回復：

你想在ss()這里阻止函式的默認效果。我們通過false從函式回傳并使用return ss()in 來實作這一點onclick。

更多資訊：如何在 onclick 方法中防止默認事件處理？

function ra() {
  var a = document.getElementById('ss');
  if (a.style.display == "none") {
    a.style.display = "block";

  } else if (a.style.display == "block") {
    a.style.display = "none";
  }

}

function ss() {
  var x = parseInt(document.getElementById("myText").value); //value of input field 1 store in x
  var c = parseInt(document.getElementById("my").value) //value of input field 2 store in c
  document.getElementById("ran").value = x   c;

  return false;
}

function updateRange() {
  var x = document.getElementById("myText").value;
  var y = document.getElementById("my").value;
  document.getElementById("ran").value = x   y;
}

body {
  background-color: black;
  color: white;
}

<form>
  <input type="checkbox" name="ABA" onclick="ra()" value="Applied Behaviour Analysis">Applied Behaviour Analysis
  <div id="ss" style="display: none;">
    <input onchange="updateRange()" type="number" id="myText" value="">
    <input onchange="updateRange()" type="number" id="my" value="">
    <button onclick="return ss()">calculate</button>
    <input type="range" id="ran" value="0">
  </div>
</form>

uj5u.com熱心網友回復：

這是一種方法；在這種方法中，我洗掉了不必要的 JavaScript 的使用（使用這種結構可以在 CSS 中輕松實作顯示/隱藏功能），我將大部分<input>元素包裝在<label>元素中，以使用戶更容易理解它們，并且通過單擊/觸摸文本及其<input>本身更容易聚焦。

我還將<button>元素的type屬性設定為button，這意味著它不會在單擊時嘗試提交表單。

此外，正如我在對您的問題的評論中指出的那樣，沒有來自的回傳值console.log()，因此 JavaScript 接收undefined然后傳遞給parseInt()并將其轉換為NaN; 這不是范圍內的可用值<input>。

代碼中的進一步指導和解釋性注釋，如下：

// use meaningful names in development (they can be easily minimised
// during the build process):
function calculate() {
  // using document.querySelectorAll() get all elements matching the CSS
  // selector passed to the function; we use the Array-literal and spread
  // syntax to convert the NodeList to an Array, and then pass that Array
  // of nodes to Array.prototype.map() to return a new Array based on that
  // initial Array of Nodes:
  const values =  [...document.querySelectorAll('input[type=number]')].map(
    // here we pass the <input> element-node into the Arrow function, and
    // return the parsed value of the current <input> node in base 10:
    (input) => parseInt(input.value, 10)
  ),
    // here we reduce the Array of entered values using Array.prototype.reduce()
    // to create a sum of the values in that Array of values:
    sum = values.reduce((acc, curr) => {return acc   curr.value}, 0);

    // here we retrieve the range input via its 'id', and set its value
    // to the sum:
    document.querySelector('#ran').value = sum;
}

// retrieving the <button> element, and using EventTarget.addEventListener() to
// bind the calculate() function as the event-handler for the 'click' event:
document.querySelector('button').addEventListener('click', calculate);

body {
  background-color: black;
  box-sizing: border-box;
  color: white;
  font: 1rem / 1.5;
  margin: 0;
  padding: 0;
}

#ss {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1em auto;
  width: 90vw;
}

/* we select the #ss element that is the immediately-adjacent
   sibling of the <input> with the name-attribute set to 'ABA'
   and style it as 'display: none' */
input[name=ABA]   #ss {
  display: none;
}

/* here we select the #ss element that is the immediately-adjacent
   sibling of the <input> with the name-attribute set to 'ABA'
   when that <input> is checked, to make #ss visible when the <input>
   is checked, and hidden when not-checked: */
input[name=ABA]:checked   #ss {
  display: flex;
}

<form>
  <input type="checkbox" name="ABA" value="Applied Behaviour Analysis">Applied Behaviour Analysis
  <div id="ss">
    <label>
    Input One value: 
    <input type="number" id="myText" value="">
    </label>

    <label>
    Input Two value: 
    <input type="number" id="my" value="">
    </label>
    <button type="button">calculate</button>

    <label>
    Calculated Value:
    <input type="range" id="ran" value="0">
    </label>
  </div>
</form>

參考：

箭頭函式。
陣列字面量 ( [ /*...*/ ])。
Array.prototype.map().
Array.prototype.reduce().
document.querySelector().
document.querySelectorAll().
EventTarget.addEventListener().
展開語法 ( [...])。

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

標籤：javascript html

上一篇：如何根據天數添加到陣列條目到陣列

下一篇：如何更改整個磁區中的文本框大小？