CODEWITHSUNDEEP
javascripthtml
user37
user37

Reputation: 67

Shortening repeating functions

I am trying to make the sliders output the values depending on the which button has been clicked.

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

As you can see for each of the buttons, the functions are being repeated and only the variable 'a' is being changed. I was wondering if there was a way to make this code more efficient, in other words shorter.

Please let me know if you have any solutions for this. Thanks.

Upvotes: 0

Views: 65

Answers (4)

Piterden
Piterden

Reputation: 789

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

Upvotes: 1

Jason Sperske
Jason Sperske

Reputation: 30416

Well you could inspect the element that triggered the event to get it's associated value like this and to be consistant with yoru slider you can bind to all inputs with a special class like this:

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

Upvotes: 3

bhansa
bhansa

Reputation: 7504

There is no need to define the same variable again and again and multiple functions to perform the same task.

Use:

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

to use the same function.

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


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

Upvotes: 1

wnamen
wnamen

Reputation: 570

Basically, just pass this to the function and since the value indicated on the button is what is different for each button, we just concatenate that to 'test' and pass that to the string. 

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

Upvotes: -1

Related Questions