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

Question

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

• 对于x.value equal 1，显示＆＃34; hello＆＃34;
• 对于x.value equal 21，请显示＆＃34; world＆＃34;
• 对于x.value equal 202，显示＆＃34;美好的一天＆＃34;
• ...

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先，这里确实不需要datalist元素。您已经将range元素配置为正确地从最小值到最大值。我认为在这一点上添加它们只会让事情变得混乱。另外，根据您的要求，单步执行1是最好的，因为我们需要将范围值映射到数组元素索引，并且当我们只需要时，我们不希望创建最多200的索引在该数组中存储3个值。

接下来，您并未正确使用label。它并不意味着标记一个部分，它的意思是标记一个表单元素以便访问。此外，您出于纯粹的风格原因使用b和br，这也不正确。 CSS处理。

＆＃13;

＆＃13;

// Get references to all the sliders in an array:
var frm = document.querySelector("form");
var out = document.getElementById("output");

// Set up number to word matrix:
var translate = {
  hiBye: ["hello", "goodbye", "see ya!"],
  toWho: ["people", "world", "universe"],
  greeting: ["Good morning", "Good day", "Good night"]
}

var sliders = document.querySelectorAll("input[type='range']");

frm.addEventListener("input", function(evt){
  var outputMessage = "";
  outputMessage = translate.hiBye[sliders[0].value];
  outputMessage += " " + translate.toWho[sliders[1].value];
  outputMessage += " " + translate.greeting[sliders[2].value];
  out.textContent = outputMessage;
});

＆＃13;

<form>
			
   <h1>Quality</h1>
   <div>Low <input type="range" min="0" max="2" value="0" id="quality"> High</div>
				
   <h1>Time</h1>
   <div>Relax <input type="range" min="0" max="2" value="0" id="time"> Stress</div>


   <h1>Budget</h1>
   <div>Low <input type="range" min="0" max="2" value="0" id="budget"> High</div>
		
   <div id="output"></div>
			
</form>

＆＃13;

＆＃13;

＆＃13;