javascript - 以英寸为单位的数量转换为英尺、厘米或码 Javascript

标签 javascript html javascript-objects innerhtml

说明如下:

  1. 要求用户输入以英寸为单位的数量(在文本框中)。

  2. 有一个选择框,其中包含以下选项:英尺、厘米、码。

  3. 如果他们选择英寸,则将转换计算为 1 英寸 = 0.0833 英尺。对于厘米:1 英寸 = 2.54 厘米。对于码,1 英寸 = 0.02778。

  4. 由于用户可能会输入小数 amoung(例如 3.99),因此请务必使用 parseFloat 选项进行解析。

  5. 使用引用:查找toFixed()函数并确保结果输出到小数点后两位。

  6. 输出到名为 results 的 div 部分。使用 innerHTML 命令输出。

这是我当前使用的代码

function convertCurrency(r) {
  document.getElementById("cnvrtMoney").innerHTML = "output";

  if (dropdown == "feetConversion".parseFloat(r)) {
    Convert = Convert / 0.0833;
  } else if (dropdown == "centimetersConversion".parseFloat(r)) {
    Convert = Convert / 2.54;
  } else if (dropdown == "yardsConversion".parseFloat(r)) {
    Convert = Convert / 0.02778;
  }

  Convert = Convert.toFixed(2);

  var resultsString = "The amount would be" + Convert;
  document.getElementById('results').innerHTML = resultsString;
}
body {
  background-color: gray;
}

#heading {
  background-color: lightgray;
  text-align: center;
}

#formConverter {
  background-color: white;
  text-align: center;
  text-justify: auto;
}

#EndResults {
  background-color: darkgray;
  text-align: center;
}
<html>

<head>
  <meta charset="utf-8">
  <title>Assignment 01: Currency Converter</title>
</head>

<body>
  <div id="heading">
    <h1> Currency Converter </h1>
    <img src="CurrencyConverter.jpg" alt="Currency Converter Banner" width="600" height="200">
  </div>
  <div id="formConverter">
    <form action="CurrencyConverter.php" method="get">
      Enter Quantity (In Inches): <input type="text" name="inputInches" /><br> Select Conversion:
      <select name="dropdown">
        <option value="feetConversion">Feet </option>
        <option value="centimetersConversion">Centimeters </option>
        <option value="yardsConversion">Yards </option>
      </select>
    </form>
  </div>
  <div id="results">
  </div>
</body>

</html>

我试图让它在用户单击下拉按钮时显示,并进行所需的精确转换。如果有人可以提供帮助,我将不胜感激。

最佳答案

首先,这是JavaScript代码,你不需要<form> .
其次,要通过 ID 访问元素,您必须设置 ID 属性而不是 NAME。
第三,数学是错误的。
第四...

最好显示工作代码。这是事件处理程序:

function convertCurrency() {

    var dropdown = document.getElementById("dropdown").value;
    var inputInches = document.getElementById("inputInches").value;

    switch (dropdown){
    case "feetConversion":
        Convert = inputInches * 0.0833;
        break;
    case "centimetersConversion":
        Convert = inputInches * 2.54;
        break;
    case "yardsConversion":
        Convert = inputInches * 0.02778;
        break;
    }

    var resultsString = "The amount would be: " + Convert;
    document.getElementById("results").innerHTML = resultsString;
}

这是 HTML 布局:

<input type="text" id="inputInches"/><br>
Select Conversion:
<select id="dropdown" onchange="convertCurrency()">
    <option value="" disabled="disabled" selected="selected"></option>
    <option value="feetConversion">Feet </option>
    <option value="centimetersConversion">Centimeters </option>
    <option value="yardsConversion">Yards </option>
</select>
<div id="results"></div>

http://jsfiddle.net/ArtyomShegeda/xbj5pf62/13/

关于javascript - 以英寸为单位的数量转换为英尺、厘米或码 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52377472/

相关文章:

javascript - 如何在我的后端显示我网站的谷歌分析

html - 浏览器对@import的支持

javascript - 将构造对象的方法传递给 JavaScript 中的函数

javascript - 对对象数组进行排序以消除重复条目

javascript - jQuery-UI 选项卡不刷新动态内容

javascript - 如何在客户端 C# 应用程序中模拟 JavaScript

javascript - CSS 和 jQuery 调整大小问题

javascript - 如何向 JQuery Mobile Panel 添加链接列表?

javascript - 将多个重叠图像保存为单个图像

javascript - 如何有效地对所有 Javascript bool 值进行字符串化?