Question

我是一名新手编码员，我有一个普遍的问题。我正在建立我的第一个合适的网站。它是一个儿童天文网站。我想要的功能之一是在线计算器，它可以告诉你在其他星球上的年龄。表格看起来像这样：

用户输入年龄的框。
用户可以选择太阳系中任何一个其他行星的下拉菜单。
提交按钮。

按下提交按钮时，1和2中的详细信息将传递给函数。然后，该功能将计算出用户出生在另一个星球上的年龄。例如，我34岁，水星一年有88天，所以如果我输入我的年龄并选择水星并按下提交，我会得到类似＆＃34;如果你出生在水星你将是141岁＆＃34;。

问题是我不知道如何将用户输入从（1）和（2）传递到函数中进行计算。我没有包含任何代码，因为我对这一切都很陌生，甚至不知道从哪里开始。我已经尝试使用谷歌搜索并查看本网站上的先前问题，但我找不到任何我能理解的内容。如果您有任何建议，将会受到大力赞赏。

Answer 1

HTML

<!-- The age input box -->
<input type="number" id="age" placeholder="your age here">

<!-- The drop down with planets -->
<select id="planet">
<option value="0">Earth</option>
<option value="1">Mars</option>
<option value="2">Neptune</option>
<option value="3">Pluto</option>
</select>

<!-- The sumbit button -->
<button onclick="calculate()">Go!</button>

<!-- The text tag in which we will print the output -->
<p id="output"></p>

<强>的JavaScript

function calculate(){
var age = document.getElementById("age").value; 
var planet = document.getElementById("planet").value;
var multipliers = [0.8, 2.5, 8.3, 0.12];

var new_age = age * multipliers[planet];
document.getElementById("output").innerHTML = "You would be " + new_age + " 
years old";
}

Answer 2

您可以使用value属性获取HTML输入的值或选择：

document.getElementById('yourinputid').value;

我建议将两个表单输入值存储在变量中，然后将它们传递给执行计算的函数。

Answer 3

嘿嘿嘿嘿che {{{

submit.onclick = function(event){

  var multipliers = [0.8, 2.5, 8.3, 0.12];
  var clientAge, 
  eachOptionIndex,
  optionArr,
  planetName,
  onPlanetAge,

clientAge = +age.value;
eachOptionIndex = +planet.value;
// get each option's value and convert it to Number 0,1,2,3

onPlanetAge = clientAge * multipliers[eachOptionIndex];

optionArr = planet.getElementsByTagName("option");
planetName = optionArr[eachOptionIndex].getAttribute("data-name");

  	output.innerHTML ="If i was born on " + planetName + " i would be " + onPlanetAge + " years Old";

};

	<input type="number" id="age" placeholder="your age here">

	<select id="planet">
  	     <option data-name="Earth" value="0">Earth</option>
  	     <option data-name="Mars" value="1">Mars</option>
  	     <option data-name="Neptune" value="2">Neptune</option>
         <option data-name="Pluto" value="3">Pluto</option>
	</select>

	<button type="submit" id="submit">Go!</button>

         <p id="output"></p>

将HTML表单中的值插入JavaScript函数

3 个答案: