javascript - javascript中的长度转换器

标签 javascript html function converters

我必须复制一个像上图一样的长度转换器。当您在框中输入一个数字并按下一个按钮时,它会在您选择的按钮右侧为您提供结果。 我从制作按钮开始。这是代码,我的问题是我不知道如何制作一个函数,该函数在框外返回所选按钮的结果。

Valeur:<input type="text" name="valeur" value="0" oninput="LengthConverter(this.value)"onchange="LengthConverter(this.value)"> Resultat ici<br>
<button type="button" id="inchToCm" onclick="pvc()">Pouces vers cm</button>
<button type="button" id="cmtoInch">CM vers pouces</button>
<button type="button"id="celciusToFarenheit">Celcius vers
Farenheit</button>
    <button type="button" id="farenheitToCelcius">Farenheit vers Celcius</button>

我开始编写函数来进行长度转换:

<script>
function pvc(valnum){
    document.getElementById("outputCm").innerHTML=valnum/0.39370;
}

</script>

在此先感谢您的帮助

最佳答案

我为“Resultat ici”添加了一个带有 id 的 p 元素,以便可以从用户那里检索该值。

Valeur:<input type="text" id="value" name="valeur" value="0" /> 

<p id="result">Resultat ici</p>

<button type="button" id="inchToCm" onclick="pvc()">Pouces vers cm</button>
<button type="button" id="cmtoInch" onclick="pvc()">CM vers pouces</button>
<button type="button"id="celciusToFarenheit" onclick="pvc()">Celcius vers
Farenheit</button>
<button type="button" id="farenheitToCelcius" onclick="pvc()">Farenheit vers 
Celcius</button>

我在下面的代码中为你做了第一次转换:

<script>
     function pvc() {  
        //get user's input
      var input = document.getElementById("value").value;

     /*implement if statement tests here for the next 3 buttons
      (cmtoinch, celctofahr, fahrtocelc)
      */

      //result of the calculation that is then put into the result p element with the id of result.
      var result = document.getElementById("result");
      result.innerHTML = input / 0.39370;

    }
</script>

此外,这是一个代码笔示例:https://codepen.io/capozzic1/pen/MmeXxR

更新:codepen 包含 if 语句

关于javascript - javascript中的长度转换器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43566784/

相关文章:

javascript - 我如何使用 Css 提取 HTML 表格的值?

Javascript 代码在启动时运行一次(addEventListener 不起作用)

html - 现有 linux 用户登录网站

c++ - 选择创建普通函数或类私有(private)成员函数

C++ 代码在 GDB online 中有效,但在代码 :Blocks 中无效

Javascript 使用 Code Mirror 中的 HTML 更新 div

javascript - 使用 Javascript 或 jQuery 自动增加 HTML 表中的数据

javascript - 使用 jquery 将字符串转换为数字

html - Div 出现在另一个绝对定位的 div 之后,而不是在下面

javascript - 未调用 NodeJS 函数