如何使用JS增加范围输入

Question

我想根据输入字段值增加我的范围栏。

如果有人在输入字段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>

Answer 1

首先，console.log()不会返回该值。

第二，根据MDN

该值不会小于分钟。默认值为0。该值不会大于最大值。默认值为100。

如果不设置最大值。输入1+输入2超过100将在input.value中设置为100

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>

Answer 2

这里有一种方法；在这种方法中，我消除了不必要的JavaScript的使用(使用这种结构可以很容易地在CSS中实现显示/隐藏功能(，我将大多数<input>元素封装在<label>元素中，以使它们更容易被用户理解，并更容易通过点击/触摸文本以及<input>本身来聚焦。

我还将<button>元素的type属性设置为button，这意味着它在单击时不会尝试提交表单。

此外，正如我在对您的问题的评论中指出的，console.log()没有返回值，因此JavaScript接收undefined，然后将其传递给parseInt()，并将其转换为NaN；其不是范围CCD_ 14中的可用值。

代码中的进一步指导和解释性意见如下：

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

参考文献：

• 箭头函数
• 数组文字([ /*...*/ ](
• CCD_ 16
• Array.prototype.reduce()
• CCD_ 18
• document.querySelectorAll()
• CCD_ 20
• 排列语法([...](

Answer 3

您希望在此处阻止ss()函数的默认效果。我们通过从函数返回false并在onclick中使用return ss()来实现这一点。

更多信息：如何防止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>