2 Комбинации слайдера

Я пытаюсь получить значения двух входов ползунка, чтобы изменить изображение над ползунком. Например, если значение ползунка 1 равно 10, а значение ползунка 2 равно 80, изображение изменится.

Мне удалось завершить это с помощью одного ползунка, однако при попытке использовать два ползунка это, кажется, испортилось. Ниже приведен код решения с одним слайдером.

P.s Слайдер брал с w3school по ссылке. https://www.w3schools.com/howto/howto_js_rangeslider.asp

Спасибо за прочтение,

var fatslider = document.getElementById("myRange1");
    var fatoutput = document.getElementById("demo1");
    fatoutput.innerHTML = fatslider.value; // Display the default slider value

    // Update the current slider value (each time you drag the slider handle)

    fatslider.oninput = function() {
        fatoutput.innerHTML = this.value;
        if (this.value == 0){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat01muscle01.png";;
        } else if (this.value == 5){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat02muscle01.png";;
        } else if (this.value == 10){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat03muscle01.png";;
        } else if (this.value == 15){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat04muscle01.png";;
        } else if (this.value == 20){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat05muscle01.png";;
        } else if (this.value == 25){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat06muscle01.png";;
        } else if (this.value == 30){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat08muscle01.png";;
        } else if (this.value == 35){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat09muscle01.png";;
        } else if (this.value == 40){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat10muscle01.png";;
        } else if (this.value == 45){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat11muscle01.png";;
        } else if (this.value == 50){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat12muscle01.png";;
        } else if (this.value == 55){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat13muscle01.png";;
        } else if (this.value == 60){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat14muscle01.png";;
        } else if (this.value == 65){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat15muscle01.png";;
        } else if (this.value == 70){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat16muscle01.png";;
        } else if (this.value == 75){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat17muscle01.png";;
        } else if (this.value == 80){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat18muscle01.png";;
        } else if (this.value == 85){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat19muscle01.png";;
        } else if (this.value == 90){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat20muscle01.png";;
        } else if (this.value == 95){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat21muscle01.png";;
        } else if (this.value == 100){
            document.getElementById("quiz-q1-current-bodytype-image").src = "images/bodytype/fat22muscle01.png";;
        } 
    }

.fat-slidecontainer {
width: 100%; /* Width of the outside container */
}

/* The slider itself */
.fat-slider {
-webkit-appearance: none;  /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}

/* Mouse-over effects */
.fat-slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- 
(Firefox) to override default look) */ 
.fat-slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}

.fat-slider::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}
.fat-slidecontainer {
width: 100%; /* Width of the outside container */
}

/* The slider itself */
.muscle-slider {
-webkit-appearance: none;  /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}

/* Mouse-over effects */
.muscle-slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- 
(Firefox) to override default look) */ 
.muscle-slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}

.muscle-slider::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}

<center>
 <img src = "images/bodytype/fat10muscle01.png" id = "quiz-q1-current-bodytype-image">
<p>Select Fat Level</p>
<div class = "fat-slidecontainer">
    <input type = "range" min = "1" max = "100" value = "50" class = "fat-slider" id = "myRange1">
    <p>Value: <span id = "demo1"></span></p>
</div>

Вам нужно объяснить, чего вы хотите достичь и как это испортилось.

— 18.05.2019 20:37

Привет, извините, если я не понял, я хочу два входа слайдера. В проекте, который я делаю, есть ползунок жира и ползунок мышц, диаграмма/изображение выше должны увеличивать/уменьшать жир, увеличивать/уменьшать мышцы и увеличивать/уменьшать и то, и другое. Я понятия не имею, почему он не работает, он делает самые случайные вещи.

— 18.05.2019 20:47

Хорошо, теперь я понимаю ваши основные проблемы. Можете ли вы создать JSFiddle, чтобы мы могли увидеть, как он терпит неудачу?

— 18.05.2019 20:53

Привет, оказывается, я сделал простую ошибку, не добавив закрывающую фигурную скобку, теперь я не уверен, как исправить оператор IF, чтобы включить обе функции, вот ссылка на jsfiddle - jsfiddle.net/x297sq6v

— 19.05.2019 07:19

javascript html css

18.05.2019 20:28

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сначала вам нужно убедиться, что ваши ценности находятся в гармонии с вашими ожиданиями. Поскольку ваш код предназначен для поддержки значений 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100. Чтобы для этого минимальное значение должно быть 5, максимальное значение должно быть 100, а шаг должен быть 5:

<center>
 <img src = "images/bodytype/fat10muscle01.png" id = "quiz-q1-current-bodytype-image">
<p>Select Fat Level</p>
<div class = "fat-slidecontainer">
    <input type = "range" min = "5" max = "100" value = "50" class = "fat-slider" id = "myRange1" step = "5">
    <p>Value: <span id = "demo1"></span></p>
</div>
<p>Select Muscle Level</p>
<div class = "muscle-slidecontainer">
    <input type = "range" min = "5" max = "100" value = "50" class = "muscle-slider" id = "myRange2" step = "5">
    <p>Value: <span id = "demo2"></span></p>
</div>
</center>

Теперь давайте исправим Javascript:

var fatslider = document.getElementById("myRange1");
    var fatoutput = document.getElementById("demo1");
    fatoutput.innerHTML = fatslider.value; // Display the default slider value

    var muscleslider = document.getElementById("myRange2");
    var muscleoutput = document.getElementById("demo2");
    muscleoutput.innerHTML = muscleslider.value; // Display the default slider value

var mapSliderToPicture = {
    "0": "01",
    "5": "01",
    "10": "02",
    "15": "03",
    "20": "04",
    "25": "05",
    "30": "06",
    "35": "07",
    "40": "08",
    "45": "09",
    "50": "10",
    "55": "11",
    "60": "12",
    "65": "13",
    "70": "14",
    "75": "15",
    "80": "16",
    "85": "17",
    "90": "18",
    "95": "19",
    "100": "20",
};

function updateImage(fat, muscle) {
    console.info(document.getElementById("quiz-q1-current-bodytype-image").src = `images/bodytype/fat${mapSliderToPicture[fat]}muscle${mapSliderToPicture[muscle]}.png`);
}

muscleslider.oninput = function() {
    updateImage(parseInt(document.getElementById("myRange1").value), parseInt(muscleoutput.innerHTML = this.value));
}

fatslider.oninput = function() {
    updateImage(parseInt(fatoutput.innerHTML = this.value), parseInt(document.getElementById("myRange2").value));
}

Пояснение по пунктам:

Я оставил определение ваших объектов, как они были
Я создал сопоставление между ожидаемыми входными значениями и их совпадениями.
Я создал функцию, которая обновляет изображение, используя литеральный шаблон для ясности кода, обратите внимание, что здесь вычисляются только числа в расположении изображения (извините за console.info, изображения в вашем примере сломаны, что затрудняет тестирование )
Я создал события oninput для обоих ползунков, вызывающих одну и ту же функцию и передающих правильные параметры.

JSFiddle: https://jsfiddle.net/0cb6hmfs/1/

@JasonSingh, добро пожаловать. Если этот ответ решил вашу проблему, вы можете принять его как правильный ответ.

— 20.05.2019 10:51

Как я могу это сделать?

— 01.06.2019 18:33

@JasonSingh под номером слева от этого ответа есть белый флажок, нажав на который, вы можете принять ответ. stackoverflow.com/help/someone-answers

— 02.06.2019 10:45

19.05.2019 16:39