My code is giving me a headache because it just refuses to cooperate

Question

My code is giving me a headache because it just refuses to cooperate

There is an issue with my HTML code for creating 5 sliders. The numbers are changing in the first slider, but not in the other sliders.

<body>
    <div class="box">
        <div class="slider">
            <input type="range" name="eng1" min="0" max="180" value="20">
        </div>
        <div class="value">180</div>
    </div>
</body>

<body>
    <div class="box2">
        <div class="slider2">
            <input type="range" name="eng2" min="0" max="180" value="30">
        </div>
        <div class="outcome">180</div>
    </div>
</body>

html css

Answer 1

Answer №1

When utilizing querySelector, it will choose the first element it comes across.
As a result, both querySelectors will scan the document from the beginning, locate the initial input tag and item with the "value" class, interacting with that specific element. This implies that both will target and manipulate the same slider and div.

Incorporate:

<html>

<body>
  <div class="box">
    <div class="slider">
      <input type="range" name="eng1" min="0" max="180" value="20">
    </div>
    <div class="value">180</div>
  </div>

  <div class="box">
    <div class="slider">
      <input type="range" name="eng2" min="0" max="180" value="30">
    </div>
    <div class="value">180</div>
  </div>
</body>

<script>
  const slider = document.querySelectorAll("input");
  const value = document.querySelectorAll(".value");

  for (let i = 0; i < 2; i++) {
    value[i].textContent = slider[i].value;
    slider[i].oninput = function() {
      value[i].textContent = this.value;
    }
  }
</script>

</html>

Avoid inserting multiple script and body tags. I have renamed all to the same class and simply utilized a loop within the script.

Answer 2

When utilizing querySelector, it will choose the first element it comes across.
As a result, both querySelectors will scan the document from the beginning, locate the initial input tag and item with the "value" class, interacting with that specific element. This implies that both will target and manipulate the same slider and div.

Incorporate:

<html>

<body>
  <div class="box">
    <div class="slider">
      <input type="range" name="eng1" min="0" max="180" value="20">
    </div>
    <div class="value">180</div>
  </div>

  <div class="box">
    <div class="slider">
      <input type="range" name="eng2" min="0" max="180" value="30">
    </div>
    <div class="value">180</div>
  </div>
</body>

<script>
  const slider = document.querySelectorAll("input");
  const value = document.querySelectorAll(".value");

  for (let i = 0; i < 2; i++) {
    value[i].textContent = slider[i].value;
    slider[i].oninput = function() {
      value[i].textContent = this.value;
    }
  }
</script>

</html>

Avoid inserting multiple script and body tags. I have renamed all to the same class and simply utilized a loop within the script.

My code is giving me a headache because it just refuses to cooperate

Answer №1

Similar questions

Assigning arbitrary hidden form data from dropdown selection

Using a variety of different font styles within a single sentence

Customize the color of arrows within an ng-bootstrap carousel

Thymeleaf is responsible for fetching the static resources by referencing the REST URI

Display the output of an array in JavaScript within the same document

Is there a "Read more" link to expand the content on the page?

JavaScript encoding and decoding challenges

The Bootstrap row has surpassed the maximum height of the container-fluid

Update JSON data in ng-blur event using AngularJS

What is the best way to showcase a full-screen overlay directly inside an iFrame?

JavaScript Summation Calculation

Loading elements of a webpage in a consecutive order

Utilize PHP to Extract ID3 Tags from MP3 Files and Embed Them into HTML

Getting rid of the IE pseudo-element that shows up on the right edge of a password textbox

Having trouble interacting with an element using Selenium in Python

Angular causes HTML Dropdown to vanish once a null value is assigned

Ensuring radio button validation prior to redirecting to contact form

Internal link formatting using CSS styling

What steps should I take to address the original tag error for Vue.js in the index.html file?

html occasionally fails to render in emails