選擇不同選項時如何更改進度欄

Question

我正在做一個模擬游戲。 有五個變量，月，金錢，壓力，工作和幸福。 我創建了一個選擇選項。 我想根據不同的選項更改變量。 到目前為止，這是我選擇的內容。 我希望更改不同的變量，因為我選擇了不同的選項，然后單擊“下一步”。 例如，如果選擇高，在家中放松和兼職，壓力進度條將增加而幸福感將下降。 我怎么做？ 另外，每次我單擊下一步時，該月份將增加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>

Answer 1

為了幫助您入門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>