如何使用HTML和JavaScript创建一个重量转换器

简介： 我们在日常生活中通常称之为“重量”的东西，在理论上被称为质量，它计算了物体中的物质量。但是，我们可以通过简单地乘以或除以地球的重力加速度g来使用质量和重量几乎可以互换，这是因为地球对我们施加的重力力量近似恒定。为了避免误解或不必要的困惑，我们讨论的是质量单位，但我们称它们为重量单位。

重量转换器可以帮助您在千克、克、磅、盎司和英石之间进行转换，这些都是重量和质量的测量单位。这对于初学者在JavaScript中训练逻辑非常有用。

创建重量转换器的方法：

HTML： 首先，您需要创建一个输入框，将一个重量测量值转换为另一个。

<p> 
    <!-- label to input field-->
    <label>Kilograms</label> 
    <!-- input field to enter the data-->
    <!-- kiloweightConvert function call function  
       kiloweightConvert to evaluate value-->
    <input id="Kilograms" type="number" 
           placeholder="Kilograms" 
           oninput="kiloweightConvert(this.value)" 
           onchange="kiloweightConvert(this.value)"> 
</p>

标签用作输入字段，用户可以在其中输入数据，placeholder 属性指定了一个简短的提示，描述用户应输入的 元素的期望值。

oninput 事件发生在元素获取到用户输入时，即当 或 元素的值变化时。 在上面的代码中，这个属性包含了值 “kiloweightConvert(this.value)”，并且在触发oninput 事件时起作用。

onchange 事件在元素的值已被改变时触发。

这两个事件类似，但不同之处在于oninput 事件在元素的值改变后被激活，而onchange 事件在内容被改变后元素失去焦点时触发。onchange 事件也适用于 元素。

其次，为转换结果创建一个输出字段。

<!--output field-->
<p>Pounds: <span id="Pounds"></span></p> 
<p>Ounces: <span id="Ounces"></span></p> 
<p>Grams: <span id="Grams"></span></p> 
<p>Stones: <span id="Stones"></span></p>

<span> 标签是用于标记文本的一部分的通用内联容器，用于对内联元素进行分组和应用样式。

JavaScript: 现在，是使用JavaScript构建功能的时候了。以下函数将评估值并返回结果。

<script> 
    //function that evaluate the value and returns result 
    function kiloweightConvert(value) { 
      document.getElementById("Pounds").innerHTML=value*2.2046; 
      document.getElementById("Ounces").innerHTML=value*35.274; 
      document.getElementById("Grams").innerHTML=value*1000; 
      document.getElementById("Stones").innerHTML=value*0.1574; 
    } 
</script>

如果您使用 innerHTML ，您可以在不刷新页面的情况下修改页面内容。这将使网站对用户输入更响应和更快速。属性 innerHTML 也可以与JavaScript代码中的 getElementById（） 一起使用，以引用HTML元素并修改其内容。方法 getElementById（） 返回一个表示id属性与指定字符串匹配的元素对象。

您还可以尝试以下方法来制作重量转换器。

为了更好地理解不同单位之间的转换，请随意使用下面提供的重量转换表。该转换表在根据您的偏好设计重量转换器时将非常有用。

示例：

下面展示了如何将一个值从千克转换为其他度量单位：

<style> 
    span { 
        color: Green; 
    } 
</style> 
  
<!-- Title of your Converter -->
<h2 style="color: Green;">Weight Converter</h2> 
  
<p>Enter a value in the Kilograms field to convert :</p> 
  
  
  
<p> 
    <!-- label the input field -->
    <label>Kilograms</label> 
    <!-- input tag for enter the data -->
    <!-- kiloweightConvert function call 
         function kiloweightConvert to evaluate value-->
    <input id="Kilograms" type="number" placeholder="kilograms" 
           oninput="kiloweightConvert(this.value)" 
           onchange="kiloweightConvert(this.value)" /> 
</p> 
  
<!-- output field-->
<p>Pounds: <span id="Pounds"></span></p> 
<p>Ounces: <span id="Ounces"></span></p> 
<p>Grams: <span id="Grams"></span></p> 
<p>Stones: <span id="Stones"></span></p> 
  
<script> 
    //function that evaluates the weight and return result 
           function kiloweightConvert(value) { 
               document.getElementById("Pounds").innerHTML = 
                 value * 2.2046; 
               document.getElementById("Ounces").innerHTML = 
                 value * 35.274; 
               document.getElementById("Grams").innerHTML = 
                 value * 1000; 
               document.getElementById("Stones").innerHTML = 
                 value * 0.1574; 
           } 
</script>

输出：