We Keep Coding

How do I get total addition of three group?

Here I three groups with range slider and input. I want to apply two things.
Multiplication of range slider and the input.
And at the end Addition of all multiplication.
I have a different ID for all input types.
$(document).ready(function(){
var t_sum=0;
var rs=document.getElementById("range").value;
var am=document.getElementById("amount").value;
var k=0;
$('.mul').each(function(){
i++;
var newID='multiplication-'+k;
$(this).attr('id',newID);
document.getElementById("multiplication").innerHTML = rs * am;
})
document.getElementById("addition").innerHTML= multiplication+k;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1">
<input type="text" id="amount1" value="10" disabled ><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1">
<input type="text" id="amount2" value="20" disabled ><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1">
<input type="text" id="amount3" value="30" disabled ><br>
<input type="hidden" id="multiplication" class="mul">
Addition of all multiplication <input type="text" id="addition" value="" disabled >
I know the code is wrong.

You can give common class to your amt input as well then use index value of each loop to get value of amt inputs and add total to your addition input.
Demo Code :
$(document).ready(function() {
$(".range").on("change", function() {
var mult = 0;
$('.range').each(function(i) {
var selector_next = parseInt($(".amt:eq(" + i + ")").val()) //get input value
mult += parseInt($(this).val()) * selector_next //multply..
console.log($(".amt:eq(" + i + ")").val(), $(this).val())
})
$("#multiplication").val(mult)
$("#addition").val(mult)
})
$(".range:first").trigger("change")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1">
<!--added class-->
<input type="text" class="amt" id="amount1" value="10" disabled><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1">
<input type="text" class="amt" id="amount2" value="20" disabled><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1">
<input type="text" class="amt" id="amount3" value="30" disabled><br>
<input type="hidden" id="multiplication" class="mul"> Addition of all multiplication <input type="text" id="addition" value="addition" disabled>

Displaying multiple slider values to users

I'm creating a form with sliders for answers. I need to be able to show users their current selection. My issue is that this only works for the last question, so the code is functional but doesn't allow any room for expansion.
Try the sliders below and notice that only one of them displays the <span> value and the rest don't.
<input type="range" min="1" max="10" value="0" class="slider" id="question1">
<span id="question1score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question2">
<span id="question2score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question3">
<span id="question3score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question4">
<span id="question4score"></span>
<script>
var slider = document.getElementById("question1");
var output = document.getElementById("question1score");
var slider = document.getElementById("question2");
var output = document.getElementById("question2score");
var slider = document.getElementById("question3");
var output = document.getElementById("question3score");
var slider = document.getElementById("question4");
var output = document.getElementById("question4score");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
Any tips to get all of these to work properly would be greatly appreciated.

Get all sliders by class name and add event listener to them.
When slider get change show the value to related span.
var sliders = document.getElementsByClassName("slider");
for(var i=0; i<(sliders.length); i++) {
sliders[i].addEventListener('input', function() {
document.getElementById(this.getAttribute('id')+'score').innerText = this.value;
});
}
<input type="range" min="1" max="10" value="0" class="slider" id="question1">
<span id="question1score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question2">
<span id="question2score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question3">
<span id="question3score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question4">
<span id="question4score"></span>

Changing the opacity of a class via Javascript

Heres the situation:
I have two range sliders:
<input id="rangeOne" disabled class="range" type="range" min="0" max="10" value="3">
and
<input id="rangeTwo" class="range" type="range" min="0" max="10" value="8">
If rangeTwo equals rangeOne, it's opacity must change to 0.5, but I have absolutely no idea how to make the JavaScript change values in CSS.
This is what I have so far as my JavaScript:
function changeAction() {
if (rangeTwo.value == rangeOne.value) {
document.getElementById("rangeTwo").style.opacity = 0.5;;
}
}

You can check the range on input event for equality to set the opacity property:
document.querySelector('#rangeTwo').addEventListener('input', function(){
if(this.value < document.querySelector('#rangeOne').value)
this.style.opacity = 0.5;
else
this.style.opacity = 1;
});
<input id="rangeOne" disabled class="range" type="range" min="0" max="10" value="3">
<input id="rangeTwo" class="range" type="range" min="0" max="10" value="8">

Seems to work for me:
function changeAction() {
if (rangeTwo.value == rangeOne.value) {
document.getElementById("rangeTwo").style.opacity = 0.5;
}
}
<input id="rangeOne" disabled class="range" type="range" min="0" max="10" value="3" onchange="changeAction()">
<input id="rangeTwo" class="range" type="range" min="0" max="10" value="8" onchange="changeAction()">

It works perfectly - also note the ;; at the end of your statement. I've hooked the code up to a button, and also added an else so it changes the opacity back if the two are not equal:
function changeAction() {
if (rangeTwo.value == rangeOne.value) {
document.getElementById("rangeTwo").style.opacity = 0.5;
} else {
document.getElementById("rangeTwo").style.opacity = 1;
}
}
<input id="rangeOne" disabled class="range" type="range" min="0" max="10" value="3">
<input id="rangeTwo" class="range" type="range" min="0" max="10" value="8">
<button onclick="changeAction()">Change Action</button>

I notice that both yourself and the other posters have all advocated setting the style attribute on the element in response to external events. I'm of the opinion you should apply/remove a class that effects the same styling.
As such, I've gone about it thusly:
"use strict";
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onWindowLoaded, false);
function onWindowLoaded(evt)
{
byId('rangeTwo').addEventListener('input', onRange2Change, false);
}
function onRange2Change(evt)
{
if (this.value == byId('rangeOne').value)
this.classList.add('seeThrough');
else
this.classList.remove('seeThrough');
}
.seeThrough
{
opacity: 0.5;
}
<input id="rangeOne" disabled class="range" type="range" min="0" max="10" value="3">
<input id="rangeTwo" class="range" type="range" min="0" max="10" value="8">

Do something while on change is pressed with javascript

I made some code to generate RGB colors but it works after changed but I wish to do it while changing:
<input type="range" id="myNumber" min="0" max="255" onchange="myFunction()" value="0" />
<input type="range" id="myNumber2" min="0" max="255" onchange="myFunction()" value="0" />
<input type="range" id="myNumber3" min="0" max="255" onchange="myFunction()" value="0" />
<p id="demo">Blalalalala</p>
<script>
function myFunction() {
var x = document.getElementById("myNumber").value;
var y = document.getElementById("myNumber2").value;
var z = document.getElementById("myNumber3").value;
document.getElementById("demo").style.transition = 'background 0.5s ease 0s';
document.getElementById("demo").style.background = 'rgb('+x+','+y+','+z+')';
}
</script>
UPDATE!
WITH ANSWER I ADDED A FOR OPACITY AND HERE IS FULL CODE IF SOMEBODY NEEDS
<p>R (Stands for red):
<input type="range" id="myNumber" min="0" max="255" step="1" oninput="myFunction()" value="0" /></p>
<p>G (Stands for green):
<input type="range" id="myNumber2" min="0" max="255" step="1" oninput="myFunction()" value="0" /></p>
<p>B (Stands for blue):
<input type="range" id="myNumber3" min="0" max="255" step="1" oninput="myFunction()" value="0" /></p>
<p>A (Stands for opacity):
<input type="range" id="myNumber4" min="0" max="1" step="0.1" oninput="myFunction()" value="1" /></p>
<p id="demo">sasasasa</p>
<script>
document.getElementById("demo").style.background = 'rgb(0,0,0,1)';
function myFunction() {
var x = document.getElementById("myNumber").value;
var y = document.getElementById("myNumber2").value;
var z = document.getElementById("myNumber3").value;
var a = document.getElementById("myNumber4").value;
document.getElementById("demo").style.transition = 'background 0.5s ease 0s';
document.getElementById("demo").style.background = 'rgba('+x+','+y+','+z+','+a+')';
}
</script>

Use HTML5 input event instead of change event.
<input type="range" id="myNumber" min="0" max="255" oninput="myFunction()" value="0" />
<input type="range" id="myNumber2" min="0" max="255" oninput="myFunction()" value="0" />
<input type="range" id="myNumber3" min="0" max="255" oninput="myFunction()" value="0" />
<p id="demo">Blalalalala</p>
<script>
function myFunction() {
var x = document.getElementById("myNumber").value;
var y = document.getElementById("myNumber2").value;
var z = document.getElementById("myNumber3").value;
document.getElementById("demo").style.transition = 'background 0.5s ease 0s';
document.getElementById("demo").style.background = 'rgb(' + x + ',' + y + ',' + z + ')';
}
</script>
Check browser compatibility of input event.

onchange should only be triggered when the user releases the mouse. To get continuous updates, you should use the oninput event, which will capture live updates in Firefox, Safari and Chrome, both from the mouse and the keyboard.
However, oninput is not supported in IE10, so your best bet is to combine the two event handlers, like this:
<input type="range" id="myNumber" min="0" max="255" onchange="myFunction()" oninput="myFunction()" value="0" />

Main range change value here child range -css javascript

I have three range first range it Main , and another it child .. when i change main range i want automatically change another range
Main:<input type="range" name="range" step="1" value="0" min="0" max="200" 0 style="width:100%;" /> <br> <BR>
Child range:<br>
<input type="range" name="range" step="1" value="0" min="0" max="200" 0/><input type="range" name="range" step="1" value="0" min="0" max="200" />
<h3>when i change Main range i want change child range with Main
</h3>

This is a basic example
window.onload = function(){
var rangeMain = document.getElementById('main'),
rangeChild1 = document.getElementById('child1'),
rangeChild2 = document.getElementById('child2');
rangeMain.onchange = function(){
rangeChild1.value = this.value;
rangeChild2.value = this.value;
}
}
Main:<input id="main" type="range" name="range" step="1" value="0" min="0" max="200" 0 style="width:100%;" /> <br> <BR>
Child range:<br>
<input id="child1" type="range" name="range" step="1" value="0" min="0" max="200" 0/>
<input id="child2" type="range" name="range" step="1" value="0" min="0" max="200" />
<h3>when i change Main range i want change child range with Main
</h3>
If you want live feedback as the range changes without waiting for mouse release, you could listen oninput
var rangeMain = document.getElementById('main'),
rangeChild1 = document.getElementById('child1'),
rangeChild2 = document.getElementById('child2');
rangeMain.onchange = function(){
rangeChild1.value = this.value;
rangeChild2.value = this.value;
}
rangeMain.oninput = function(){
rangeChild1.value = this.value;
rangeChild2.value = this.value;
}
Main:<input id="main" type="range" name="range" step="1" value="0" min="0" max="200" 0 style="width:100%;" /> <br> <BR>
Child range:<br>
<input id="child1" type="range" name="range" step="1" value="0" min="0" max="200" 0/>
<input id="child2" type="range" name="range" step="1" value="0" min="0" max="200" />
<h3>when i change Main range i want change child range with Main
</h3>