英文:
Why can't I successfully increase an HTML range slider value with JavaScript, but I can successfully decrease it?
问题
我尝试通过JavaScript来调整HTML范围滑块，但它的效果不如预期。
我可以成功地向下调整它，但向上调整也无效，情况一样。
这是在JSFiddle中的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="" />
<style type="text/css">
* {
margin: 0;
padding: 0;
color: #FFFFFF;
background-color: #131313;
font-family: sans-serif;
}
button {
padding: 0.5em 1em;
}
#content {
margin: 2em;
display: flex;
flex-direction: column;
}
#content > div {
margin: 1em 0;
}
.output {
width: 400px;
padding: 1em;
background-color: #C0C0C0;
color: #000000;
padding: 1em;
font-family: monospace;
font-size: 2em;
border: dotted 2px #A9A9A9;
}
</style>
<title></title>
</head>
<body>
<div id="container">
<div id="content">
<div>
<input class="volume" type="range" min="0" max="4" value="2" step="0.01">
</div>
<div class="output"></div>
<div>
<button id="down"> ‒ </button>
<button id="up"> + </button>
</div>
</div> <!-- end content div -->
</div> <!-- end container div -->
<script type="text/javascript">
const VOLUME = document.querySelector('.volume');
const OUTPUT = document.querySelector('.output');
const UP = document.querySelector('#up');
const DOWN = document.querySelector('#down');
const STEP_VALUE = parseFloat(VOLUME.step);
OUTPUT.innerHTML = VOLUME.value;
VOLUME.addEventListener('input', function(e){
OUTPUT.innerHTML = VOLUME.value;
});
UP.addEventListener('click', function(){
VOLUME.value = (VOLUME.value + STEP_VALUE);
OUTPUT.innerHTML = VOLUME.value;
});
DOWN.addEventListener('click', function(){
VOLUME.value = (VOLUME.value - STEP_VALUE);
OUTPUT.innerHTML = VOLUME.value;
});
document.addEventListener('keydown', function(e){
switch(e.key){
case 'ArrowUp':
VOLUME.value = (VOLUME.value + STEP_VALUE);
OUTPUT.innerHTML = VOLUME.value;
break;
case 'ArrowDown':
VOLUME.value = (VOLUME.value - STEP_VALUE);
OUTPUT.innerHTML = VOLUME.value;
break;
case 'ArrowLeft':
break;
case 'ArrowRight':
break;
}
}, false);
</script>
</body>
</html>
英文:
I am attempting to adjust an HTML range slider via JavaScript, but it is not working as intended.
I can successfully adjust it down, but up is not working as well, the same.
Here is the code in a JSFiddle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="" />
<style type="text/css">
* {
margin: 0;
padding: 0;
color: #FFFFFF;
background-color: #131313;
font-family: sans-serif;
}
button {
padding: 0.5em 1em;
}
#content {
margin: 2em;
display: flex;
flex-direction: column;
}
#content > div {
margin: 1em 0;
}
.output {
width: 400px;
padding: 1em;
background-color: #C0C0C0;
color: #000000;
padding: 1em;
font-family: monospace;
font-size: 2em;
border: dotted 2px #A9A9A9;
}
</style>
<title></title>
</head>
<body>
<div id="container">
<div id="content">
<div>
<input class="volume" type="range" min="0" max="4" value="2" step="0.01">
</div>
<div class="output"></div>
<div>
<button id="down"> &#x2012; </button>
<button id="up"> + </button>
</div>
</div> <!-- end content div -->
</div> <!-- end container div -->
<script type="text/javascript">
const VOLUME = document.querySelector('.volume');
const OUTPUT = document.querySelector('.output');
const UP = document.querySelector('#up');
const DOWN = document.querySelector('#down');
const STEP_VALUE = parseFloat(VOLUME.step);
OUTPUT.innerHTML = VOLUME.value;
VOLUME.addEventListener('input', function(e){
OUTPUT.innerHTML = VOLUME.value;
});
UP.addEventListener('click', function(){
VOLUME.value = (VOLUME.value + STEP_VALUE);
OUTPUT.innerHTML = VOLUME.value;
});
DOWN.addEventListener('click', function(){
VOLUME.value = (VOLUME.value - STEP_VALUE);
OUTPUT.innerHTML = VOLUME.value;
});
document.addEventListener('keydown', function(e){
switch(e.key){
case 'ArrowUp':
VOLUME.value = (VOLUME.value + STEP_VALUE);
OUTPUT.innerHTML = VOLUME.value;
break;
case 'ArrowDown':
VOLUME.value = (VOLUME.value - STEP_VALUE);
OUTPUT.innerHTML = VOLUME.value;
break;
case 'ArrowLeft':
break;
case 'ArrowRight':
break;
}
}, false);
</script>
</body>
</html>
答案1
得分: 2
VOLUME.value的类型在您的上/下函数中是一个字符串而不是一个数字。将其转换为一个数字（例如，将VOLUME.value = (VOLUME.value + STEP_VALUE);更改为VOLUME.value = (+VOLUME.value + STEP_VALUE);）。
英文:
The type of VOLUME.value in your up/down functions is a string not a number. Cast it to a number (e.g. change VOLUME.value = (VOLUME.value + STEP_VALUE); to VOLUME.value = (+VOLUME.value + STEP_VALUE);.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论