简体   繁体   English

有关等式和条件的简单HTML / JavaScript问题

[英]Simple Html/JavaScript question regarding equations and conditionals

I am new to programming/coding so this is probably quite easy for most of you. 我是编程/编码的新手,所以对大多数人来说这可能很容易。 I am supposed to create a web app for weight conversion: from US Dollars to Japanese Yen and from Japanese Yen to US Dollars. 我应该创建一个用于重量转换的Web应用程序:从美元到日元,从日元到美元。 Assume 1 Dollar = 112.57 Yen - Use one input box - Use a drop-down to select which conversion to perform - The two formulas are: Yen =Dollars*112.57 AND Dollars=Yen/112.57 假设1美元= 112.57日元-使用一个输入框-使用下拉菜单选择要执行的转换-两个公式是:日元=美元* 112.57和美元=日元/112.57

This is what I got so far: 这是我到目前为止所得到的:

<!DOCTYPE html>
<html>
<head>
<script>
function convert()
{
var Dollars, Yen; //declare variables

//INPUT
if (inCurrency.value == "U.S Dollars to Yen") {x.value=Dollars}
else if (inCurrency.value == "Yen to U.S Dollars") {x.value=Yen}

//PROCESSING
Yen = Dollars * 112.57;
Dollars = Yen / 112.57;

//OUTPUT
spYen.innerHTML = Yen;
spDollars.innerHTML = Dollars;

}
</script>
<style>
.CCC {
font-family: Arial;
font-size: 12pt;
color: lightseagreen;
}

.DDD {
font-family: 'Times New Roman', Times, serif;
font-size: 12pt;
color: lawngreen;
}
</style>
</head>
<body>
<h2>Currency Converter</h2>
<span class="CCC">Select one:</span>

<select id="inCurrency">
<option>U.S Dollars to Yen</option>
<option>Yen to U.S Dollars</option>

</select><br />
<span style="color:deeppink">Enter amount </span><span id="x"></span><input 
type="text" /><br />

<i>
<span class="DDD">Dollars: </span><span id="spDollars"></span><br />
<span class="DDD">Yen: </span><span id="spYen"></span><br />

</i>

<input type="button" value="Convert Currency" onClick="convert()" />
<br />
<br />
<a href="Index.html">Home

</body>
</html>

This is what it looks like the problem I am having is the actual coding in the head section. 这就是我遇到的问题是头部的实际编码。 I am not sure how to set it up right so does it executes the equations. 我不确定如何正确设置它,它是否执行方程式。 I was wondering if someone could help. 我想知道是否有人可以提供帮助。 Thank you. 谢谢。

This is a way of getting your desired result. 这是获得所需结果的一种方法。 I have fixed the HTML and Javascript for you. 我已经为您修复了HTML和Javascript。

Directly trying to get/set the id values is not the right way. 直接尝试获取/设置id值不是正确的方法。

 function convert() { var Dollars, Yen; //declare variables //INPUT var e = document.getElementById("inCurrency"); var inCurrency = e.options[e.selectedIndex].text; var amount = document.getElementById("x").value; //PROCESSING if (inCurrency == "US Dollars to Yen") { Dollars = amount; Yen = Dollars * 112.57; } else if (inCurrency == "Yen to US Dollars") { Yen = amount; Dollars = Yen / 112.57; } //OUTPUT document.getElementById("spYen").innerHTML = Yen; document.getElementById("spDollars").innerHTML = Dollars; } 
 .CCC { font-family: Arial; font-size: 12pt; color: lightseagreen; } .DDD { font-family: 'Times New Roman', Times, serif; font-size: 12pt; color: lawngreen; } 
 <h2>Currency Converter</h2> <span class="CCC">Select one:</span> <select id="inCurrency"> <option>US Dollars to Yen</option> <option>Yen to US Dollars</option> </select><br /> <span style="color:deeppink">Enter amount </span><input id="x" type="text" /><br /> <i> <span class="DDD">Dollars: </span><span id="spDollars"></span><br /> <span class="DDD">Yen: </span><span id="spYen"></span><br /> </i> <input type="button" value="Convert Currency" onClick="convert()" /> <br /> <br /> <a href="Index.html">Home 

function convert()
{
   convertRule = document.querySelector("#inCurrency").value;
   amount = document.querySelector("#amount").value;
   if (inCurrency.value == "U.S Dollars to Yen"){
      Yen = amount * 112.57;
      document.getElementById("spDollars").innerHTML = Yen
   }else{
      Dollars = amount * 122.22;
      document.getElementById("spDollars").innerHTML = Dollars
  }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM