-1

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?

Davidcreates
  • 1
  • 2
  • Something like `document.getElementById("res_1").addEventListener("input", ({ target: { valueAsNumber } }) => document.getElementById("res_1").innerText = valueAsNumber);`? – Sebastian Simon Oct 13 '21 at 09:49

1 Answers1

-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>
Ravi Ashara
  • 1,177
  • 7
  • 16
  • Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Use the `input` event, not `click` event, if you want to maintain accessibility guidelines. – Sebastian Simon Oct 13 '21 at 09:55