Question

我试图让滑块根据点击的按钮输出值。

＆＃13;

<!DOCTYPE html>
<html>

<body>
<div id="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>
<input type="button" onclick="function1()" value="1">
<input type="button" onclick="function2()" value="2">
<input type="button" onclick="function3()" value="3">

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

function function1() {
	var a = 'test1'
    console.log('test: ' + a +' '+ slider.value);
}

function function2() {
	var a = 'test2'
    console.log('test: ' + a +' '+ slider.value);
}

function function3() {
	var a = 'test3'
    console.log('test: ' + a +' '+ slider.value);
}

</script>
</script>

</body>
</html>

＆＃13;

正如您可以看到的每个按钮，功能正在重复，只有变量＆＃39; a＆＃39;正在改变。我想知道是否有办法使这段代码更有效率，换句话说更短。

如果您有任何解决方案，请告诉我。感谢。

Answer 1

那么你可以检查触发事件的元素以获得它的相关值，并且与yoru滑块一致，你可以使用像这样的特殊类绑定到所有输入：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var buttons = document.getElementsByClassName('button');

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
for(var i = 0; i < buttons.length; i++) {
  var button = buttons[i];
  button.onclick = function() {
    var a = 'test'+this.value;
    console.log('test: ' + a +' '+ slider.value);
  }
}

<div id="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>
<input type="button" class="button" value="1">
<input type="button" class="button" value="2">
<input type="button" class="button" value="3">

Answer 2

无需一次又一次地定义相同的变量和多个函数来执行相同的任务。

使用：

<input type="button" onclick="some_function('test1')" value="1">
<input type="button" onclick="some_function('test2')" value="2">
<input type="button" onclick="some_function('test3')" value="3">

使用相同的功能。

function some_function(a) {
    console.log('test: ' + a +' '+ slider.value);
}

＆＃13;

<!DOCTYPE html>
<html>

<body>
<div id="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>
<input type="button" onclick="function_name('test1')" value="1">
<input type="button" onclick="function_name('test2')" value="2">
<input type="button" onclick="function_name('test3')" value="3">

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

function function_name(a) {
    console.log('test: ' + a +' '+ slider.value);
}

</script>

</body>
</html>

＆＃13;

Answer 3

let slider = document.getElementById('myRange');
let output = document.getElementById('output');

let setOutputHTML = function (value) {
  output.innerHTML = value;
};

let setSliderValue = function (e) {
  slider.value = e.currentTarget.value;
  slider.dispatchEvent(new Event('input'));
};

slider.addEventListener('input', function (e) {
  setOutputHTML(e.currentTarget.value);
});

setOutputHTML(slider.value);

Array.from(document.querySelectorAll('[type="button"]'))
  .forEach(function (input) {
    input.addEventListener('click', setSliderValue);
  });

<div>
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="output"></span></p>
</div>

<input type="button" value="25" name="field_slug" />
<input type="button" value="50" name="field_dlug" />
<input type="button" value="75" name="field_flug" />

Answer 4

基本上，只需将this传递给函数，由于按钮上指示的值是每个按钮的不同，我们只是将其连接到'test'并将其传递给字符串。

    <!DOCTYPE html>
    <html>
    
    <body>
    <div id="slidecontainer">
      <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
      <p>Value: <span id="demo"></span></p>
    </div>
    <input type="button" onclick="setSliderValue(this)" value="1">
    <input type="button" onclick="setSliderValue(this)" value="2">
    <input type="button" onclick="setSliderValue(this)" value="3">
    
    <script>
    var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");
    output.innerHTML = slider.value;
    
    slider.oninput = function() {
      output.innerHTML = this.value;
    }
    
    function setSliderValue(button) {
        var value = button.value
    	var testType = 'test' + value;
        console.log('test: ' + testType +' '+ slider.value);
    }
    
    </script>
    
    </body>
    </html>

缩短重复功能

4 个答案: