Add values From Range object in javascript [duplicate]

Question

i am new to the world of javascript and would love some help. I have a simple quiz with "range" objects in HTML. Each Value is for the range is displayed with

<input type="range" class="form-range" min="0" max="5" id="input1"
oninput="q1points.value = this.value">
<output id="q1points">0</output>

I'm not sure if this way of displaying the values of my range objects is the way to go if i want to count them together.

I have 5 questions. How do i add these values together i javascript and store them in variables?

Something like document.getElementById("res_1").addEventListener("input", ({ target: { valueAsNumber } }) => document.getElementById("res_1").innerText = valueAsNumber);? — Sebastian Simon
– Sebastian Simon, Commented Oct 13, 2021 at 9:49

Ravi Ashara · Accepted Answer · 2021-10-13 09:52:28Z

-1

function myFunction(){
  var val = document.getElementById('input1').value;
  document.getElementById('res_1').innerHTML = val;
}

<form class="questionForm-1" id="q1" data-question="1">
    <div id="qhead" class="d-flex p-2 bd-highlight text-center">
        <h1>Question 1</h1>
    </div>
    <div id="ondertitel" class="d-flex p-2 bd-highlight text-center">
        <h2>Ik ervaar rust wanneer ik een duidelijke planning heb voor die dag. </h2>
    </div>

    <div class="form-check" id="form-check">
        <div class="d-flex p-4 text-center">
            <label for="customRange2" class="form-label">Example range</label>
            <input type="range" class="form-range" min="0" max="5" id="input1">
        </div>
    </div>
    <p id="res_1"></p>
    <button id="btn-1" type="button" class="btn btn-danger" onclick="myFunction()">Volgende</button>
</form>

answered Oct 13, 2021 at 9:52

Ravi Ashara

1,2169 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sebastian Simon Over a year ago

Inline event handlers like onclick are not recommended. They are an obsolete, hard-to-maintain and unintuitive way of registering events. Always use addEventListener instead. Use the input event, not click event, if you want to maintain accessibility guidelines.

Collectives™ on Stack Overflow

Add values From Range object in javascript [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related