javascript - 将表单范围值输出转换为文本

Question

我做了这个简单的表格。现在我正在寻找一种将输出翻译成文本的方法。

• 对于 x.value 等于 1，显示“hello”
• 对于 x.value 等于 21，显示“world”
• 对于 x.value 等于 202，显示“Good day”
• ...

我该怎么做？我想我需要一些 JS？

<form oninput="x.value=parseInt(quality.value)+parseInt(time.value)+parseInt(budget.value)">
			
   <label for="quality"><b>Quality</b></label><br/>
Low <input type="range" min="0" max="2" value="0" id="quality" step="1"> High
				
   <br/><br/>

   <label for="time"><b>Time</b></label><br/>
Relax <input type="range" min="0" max="20" value="0" id="time" step="10" list="timemarks"> Stress
   <datalist id="timemarks">
  <option>0</option>
  <option>10</option>
  <option>20</option>
</datalist>
				
   <br/><br/>

   <label for="budget"><b>Budget</b></label><br/>
Low <input type="range" min="0" max="200" value="0" id="budget" step="100" list="budgetmarks"> High
<datalist id="budgetmarks">
  <option>0</option>
  <option>100</option>
  <option>200</option>
</datalist>
				
   <br/><br/>
				
   <b><output name="x" for="quality time budget"></output>
			
</form>

Answer 1

function myFunction(value1, value2, value3){
var total = parseInt(value1) + parseInt(value2) + parseInt(value3)
var message = ""
switch(total){
case 0:
  message = "Good";
  break
case 1: 
  message = "Hello";
  break
case 2: 
  message = "World";
  break
case 20: 
  message = "Good Good";
  break
case 21: 
  message = "Hello Hello";
  break
case 22: 
  message = "World World";
  break
case 100: 
  message = "life life life";
  break
case 101: 
  message = "cool cool cool";
  break
case 102: 
  message = "know know know";
  break
case 110: 
  message = "what what what";
  break
case 111: 
  message = "why why why";
  break
case 112: 
  message = "how how how";
  break
case 120: 
  message = "how how how";
  break
 
//there is 3^3(27) cases ...

}

//...
document.getElementById("output").innerHTML = message;
}

<form oninput="x.value=parseInt(quality.value)+parseInt(time.value)+parseInt(budget.value)">
			
   <label for="quality"><b>Quality</b></label><br/>
Low <input type="range" min="0" max="2" value="0" id="quality" step="1" onchange="myFunction(quality.value,time.value,budget.value)"> High
				
   <br/><br/>

   <label for="time"><b>Time</b></label><br/>
Relax <input type="range" min="0" max="20" value="0" id="time" step="10" list="timemarks" onchange="myFunction(quality.value,time.value,budget.value)"> Stress
   <datalist id="timemarks">
  <option>0</option>
  <option>10</option>
  <option>20</option>
</datalist>
				
   <br/><br/>

   <label for="budget"><b>Budget</b></label><br/>
Low <input type="range" min="0" max="200" value="0" id="budget" step="100" list="budgetmarks" onchange="myFunction(quality.value,time.value,budget.value)"> High
<datalist id="budgetmarks">
  <option>0</option>
  <option>100</option>
  <option>200</option>
</datalist>
				
   <br/><br/>
				
   <b><output name="x" for="quality time budget"></output>
   
   <div id="output"> </div>
			
</form>