Question

我正在尝试获取用于计算摄氏度值并将其通过函数转换为华氏温度的按钮。我尝试过的一切都没有按照我的意愿进行。按钮的值应为摄氏温度值，才能转换为华氏温度。

我尝试定义函数（button1、2和3）中的参数，更改HTML中的onclick，更改变量名，并仔细检查所有内容。

HTML

<input type="button" name="button1" value="10" onclick="conversion1;" />
<input type="button" name="button2" value="20" onclick="conversion2" />
<input type="button" name="button3" value="30" onclick="conversion3" />

JavaScript

function conversion (button1, button2, button3) {
  var conversion1 = ((button1 * 9) / 5) + 32;
  var conversion2 = ((button2 * 9) / 5) + 32;
  var conversion3 = ((button3 * 9) / 5) + 32;
}

var conversionInput = conversion(10, 20, 30);

我希望输出是三个单独的按钮，当单击它们时，将根据它们的值显示各自的华氏转换。

Answer 1

一个函数足以根据按钮本身的值来计算所有这些值：

单击按钮后，结果将显示在一个跨度中（如果需要其他地方，也可以返回该值）：

function conversion(temp) {
    document.getElementById('result').innerHTML = ((temp * 9) / 5) + 32;
}

<input type="button" name="button1" value="10" onclick="conversion(this.value);" />
<input type="button" name="button2" value="20" onclick="conversion(this.value);" />
<input type="button" name="button3" value="30" onclick="conversion(this.value);" />

Result: <span id="result"></span>

Answer 2

如果要使用@ManuelMannhardt按钮，那么使用文本输入会更好：

您可以在操作中直接在组件中使用onclick事件：

function calculate() {
    var inputWithValue = document.querySelector('#val');
    var spanForResult = document.querySelector('#resultValue');
    spanForResult.innerHTML = ((inputWithValue.value * 9) / 5) + 32;
};

<input type="text" id="val" />
<input type="button" id="convert" onclick="calculate()" value="Convert to Fahrenheit" />
<div id="result">Result: <span id="resultValue"></span> </div>

但是最好不要将代码与html混合使用。这是我的意思：

var button = document.querySelector('#convert');
var inputWithValue = document.querySelector('#val');
var spanForResult = document.querySelector('#resultValue');

button.onclick = ()=>{
    spanForResult.innerHTML = ((inputWithValue.value * 9) / 5) + 32;
};

<input type="text" id="val" />
<input type="button" id="convert" value="Convert to Fahrenheit" />
<div id="result">Result: <span id="resultValue"></span> </div>

也解释()=>{与function() {

另外，请不要忘记SO的Javascript标记有很多参考来帮助您学习：https://stackoverflow.com/tags/javascript/info

Answer 3

不确定这是否是您所需要的，但是如果您想在单击时更改按钮的值/文本，则可以使用以下内容：

<script>
function convert(el){
  //get the value from unit custom attribute, c (Celsius) or f (Fahrenheit)
  var unit = el.getAttribute("unit")
 // if is Celsius convert to Fahrenheit else do reverse
  if (unit == "c"){
    el.setAttribute("unit","f") //set unit to f
    el.value = ((el.value * 9) / 5) + 32 //set value with new value calculated C --> F
  }
  else{
    el.setAttribute("unit","c") //set unit to c
    el.value = ((el.value - 32) * 5) / 9 //set value with new value calculated F --> C
  }
}
</script>

<input type="button" name="button1" value="10" unit="c" onclick="convert(this);">
<input type="button" name="button2" value="20" unit="c" onclick="convert(this);">
<input type="button" name="button3" value="30" unit="c" onclick="convert(this);">

希望这对您有所帮助。

如何将功能转换为可用按钮？

3 个答案: