Как изменить индикатор при выборе разных опций - PullRequest
Новая
       13

Как изменить индикатор при выборе разных опций

0 голосов
/ 24 апреля 2018

Я делаю игру-симулятор. Есть пять переменных: месяц, деньги, стресс, работа и счастье. Я создал опцию выбора. Я хочу изменить переменные в соответствии с различными параметрами. Это то, что я пока имею для выбора варианта. Я хочу, чтобы разные переменные менялись, когда я выбираю разные параметры и нажимаю кнопку Далее. Например, если выбран высокий уровень, отдых дома и неполный рабочий день, индикатор прогресса стресса увеличится, а счастье уменьшится. Как я могу это сделать? Также месяц будет увеличиваться на 1 каждый раз, когда я нажимаю «Далее». 

<div id="monthlyworkplan" class="hidden p-4">
            <h4 align="center">Create This Month's Work Plan</h4>
            <form class="select">
                <div style="padding-top: 10px;">Select work effort:</div> 
                <select class="selectpicker" style="width: 100px" id="workeffort" title="Select">
                  <option>Select</option>
                  <option value="high">High</option>
                  <option value="medium">Medium</option>
                  <option value="low">Low</option>
                </select>
                <div style="padding-top: 10px;">Select after work activity:</div>
                <select class="selectpicker" style="width: 100px" id="afterworkactivity" title="Select">
                  <option>Select</option>
                  <option value="high">Connect with potential client</option>
                  <option value="medium">Relax at home</option>
                  <option value="low">Hang out with friends</option>
                </select>
                <div style="padding-top: 10px;">Select weekend activity:</div>
                <select class="selectpicker" style="width: 100px" id="weekend activity" title="Select">
                  <option>Select</option>
                  <option value="high">Part-time job</option>
                  <option value="medium">Pass out flyers</option>
                  <option value="low">Relax at home</option>
                </select>
                <div id="workefforteffect" style="font-size:11px position:absolute; right:-131px; top:171px;" class="hidden p-4">stress</div>
            </form>
                <button class="btn" id="next">NEXT</button>

1 Ответ

0 голосов
/ 24 апреля 2018

Чтобы помочь вам начать путешествие по HTML, CSS, JS ад, вот несколько базовых кодов, гармонично работающих для выполнения простой функции ввода / вывода. 

/* change how the progress bar looks using classes */
.bar { 
  width: 200px; 
  height: 24px;
  background-color: #e5e5e5;
  margin-bottom: 24px;
}
.bar .progress {
  width: 50%;
  height: inherit;
  background-color: purple;
}
<!-- HTML with embedded JS -->
<div id="bar" class="bar">
  <div id="progress" class="progress"></div>
</div>

<div id="myForm">
  <select id="selector-1">
    <option value="1">Subtract 10</option>
    <option value="2">Add 10</option>
    <option value="3">Add 20</option>
  </select>
  <button onclick="myFunction()">SUBMIT</button>
</div>

<script>
  function myFunction(){
    //declare selector variables
    var s1 = document.getElementById("selector-1");
    var s1_value = s1.options[s1.selectedIndex].value;
    
    //update progress bar
    var bar = document.getElementById('progress');
    if (s1_value == "1"){ bar.style.width = (bar.offsetWidth - 10) + "px"; }
    else if (s1_value == "2"){ bar.style.width = (bar.offsetWidth + 10) + "px"; }
    else if (s1_value == "3"){ bar.style.width = (bar.offsetWidth + 20) + "px"; }
  }
</script>
...