如何使单选按钮更新

Question

Does anyone know how I can make it so the total value is live updated depending on which radio button is selected and the value of the range selector? All I get is Total Value: 50[object HTMLInputElement] .

 var drink = document.querySelector('[name="drink"]:checked'); var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); output.innerHTML = Number(slider.value) + drink; slider.oninput = function() { output.innerHTML = Number(slider.value) + drink; } 

 <div class="slidecontainer"> <input type="radio" class="r1" name="drink" value="50"> Cider/ Beer<br> <input type="radio" class="r1" checked="checked" name="drink" value="20"> Wine<br> <input type="radio" class="r1" name="drink" value="30"> Spirits <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> <p>Total Value: <span id="demo"></span></p> </div> 

Answer 1

Try to set your input value as the name on the radio.

  var drink = document.querySelector('[name="drink"]:checked').value; var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); output.innerHTML = Number(slider.value) +' '+ drink; slider.oninput = function() { changeName() } function changeName(){ drink = document.querySelector('[name="drink"]:checked').value; output.innerHTML = Number(slider.value) + ' ' +drink; } 

 <div class="slidecontainer"> <input type="radio" class="r1" name="drink" value="Cider/ Beer" onchange="changeName()"> Cider/ Beer<br> <input type="radio" class="r1" checked="checked" name="drink" value="Wine" onchange="changeName()"> Wine<br> <input type="radio" class="r1" name="drink" value="Spirits" onchange="changeName()"> Spirits <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> <p>Total Value: <span id="demo"></span></p> </div>