0

All I want is set getElementById by var (it must be automatic because I have got multiple of this range inputs (brightness, contrast, sharpen, etc.). How can I do this?

    function showVal(value, id) {
      var spanId = "#" + id + "Id";
      document.getElementById("\"" + spanId + "\"").innerHTML = value;
    }
<div class="row" style="display: inline-block; width: 45%; margin: 0px 5px 5px 5px;">
  <div class="col-sm-5" style="padding: 2px;">
    <label class="control-label" style="float: left">Jasność:</label>
    <span class="filterValue" id="brightnessId">0</span>
  </div>
  <div class="col-sm-7" style="padding: 2px;">
    <input id="brightness" type="range" min="-100" max="100" step="1" value="0" data-filter="brightness" onchange="showVal(this.value, this.id)">
  </div>
</div>

2
  • 2
    Why are you passing # and quotes as an ID?
    – SLaks
    Commented Feb 20, 2015 at 17:12
  • my mistake! I'm mixing jQ with JS... ;)
    – Matthew
    Commented Feb 20, 2015 at 17:19

3 Answers 3

1

Looks like you are mixing up jQuery and vanilla JavaScript . . . you should simply be able to use this:

function showVal(value, id) {
    document.getElementById(id + "Id").innerHTML = value;
}
1
  • thank you! It works perfectly and this example is the shortest!
    – Matthew
    Commented Feb 20, 2015 at 17:21
1

You don't need to use #, and don't need to enclose it between ""

   function showVal(value, id) {
        var spanId = id + "Id";
        document.getElementById(spanId).innerHTML = value;
   }

Here is a working example

You also could write this code like this:

function showVal(obj) {
        var spanId = obj.id + "Id";
        document.getElementById(spanId).innerHTML = obj.value;
}

and use only this in your HTML

<input id="brightness" type="range" min="-100" max="100" step="1" value="0" data-filter="brightness" onchange="showVal(this)">
0
0

Since you have included jQuery in tags, I'd use it. I'd also use mousemove instead of change, so that your output element gets updated at real time:

input field:

<input id="brightness" type="range" min="-100" max="100" step="1" value="0" data-filter="brightness">

jQuery:

$('#brightness').mousemove(function(){
   $('#'+$(this).attr('id')+'Id').text($(this).val());
});

DEMO


OR, Because your input field have data-filter="..." attribute and you want to have more fields which practically perform the same function (contrast, sharpness, etc...), I'd remove id, add class as selector and then use this data-filter attribute to match output element (span). So that is the whole process simple and automated:

<input class="settings" type="range" min="-100" max="100" step="1" value="0" data-filter="#brightness">
<input class="settings" type="range" min="-100" max="100" step="1" value="0" data-filter="#contrast">
<input class="settings" type="range" min="-100" max="100" step="1" value="0" data-filter="#sharpness">

jQuery (for all these fields):

$('.settings').mousemove(function(){
   $($(this).data('filter')).text($(this).val());
});

DEMO

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.