JavaScript中的长度转换器

Question

我需要制作一个类似上图的长度单位转换器。当您在输入框中输入数字并按下按钮时，它会在所选按钮右侧显示结果。 我先创建了按钮。以下是代码，我的问题是不知道如何编写一个函数，使其将所选按钮的结果显示在输入框外。

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>

Thanks in advance for the help

- bourki

---

没有，不存在。@guest271314 - bourki

结果应该追加到document的哪个元素？注意，在事件属性调用时，pvc()调用中没有传递参数，而pvc函数体需要valnum参数。 - guest271314

所以我需要放置PVC（valnum），这是你的意思吗？ - bourki

是的，valnum是函数中要转换的数字。 - bourki

我刚意识到它不是这样的。我该如何声明它以便它可以获取用户输入的值？ - bourki

Answer 1

我已经添加了一个带有id的p元素，用于"Resultat ici"，以便可以从用户那里检索该值。

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>

此外，这里有一个Codepen示例：https://codepen.io/capozzic1/pen/MmeXxR。

更新：Codepen包括if语句。

- Dream_Cap

---

它正常工作了！我将使用您的示例完成其余部分。我仍然对基本的JavaScript有很多困惑，您的回答对我有所帮助。感谢大家的帮助。 - bourki

我很高兴能够帮忙。我也在学习中。以下是一些学习JavaScript的好网站：teamtreehouse.com，freecodecamp.com，codecademy.com，udacity.com。 - Dream_Cap

我更新了Codepen，包括一个可能的if语句。这个if语句比较了函数的参数，而函数的参数是由HTML中的“onclick”事件输入的。在if语句中添加每个按钮所需的新计算：https://codepen.io/capozzic1/pen/MmeXxR - Dream_Cap

非常感谢您提供的Codepen，我已经使用公式更新了代码，但是当我尝试时它不起作用。我已经使用计算更新了IF语句，但是当我按下按钮时什么也没有发生。 - bourki

function pvc(val){ var input = document.getElementById("value").value; var result = document.getElementById("result"); if (val == 'inch') {
result.innerHTML = input / 0.39370; console.log(val); } else if (val == 'cm') { result.innerHTML = input * 0.39370; } else if (val == 'celc') {
result.innerHTML = * 9 / 5 + 32 } else if (val == 'fahr') {
result.innerHTML = (farenheit – 32) * 5 / 9 } } - bourki