Question

链接一个javascript函数以读取输入文本框和单选按钮，然后将结果输出到适当的区域。如果温度不是数字或未选择单选按钮，则程序应使用“警报”来打印消息。

提交转换后，我无法获得Java来计算转换。

//html   
<div id = "input">
<form method = "post" action = "tempcon.php" name = "form1">

Temperature: <input type = "text" name = "temp"> <br />

<input type = "radio" name = "temp1" value = "Fahrenheit"> Convert to 
Fahrenheit 

<br />

<input type = "radio" name = "temp1" value = "Celcius"> Convert to 
Celcius 

<br />

<input type = "submit" name = "submit" value = "Calculate!">



//java

window.addEventListener("load",link_events, false);
function link_events() {

document.forms["form1"]["submit"].onclick = Caculate;
}


function Calculate() {

var temp = parseFloat(document.getElementById("temp").value);

var F = document.getElementById("Fahrenheit")

var C = document.getElementById("Celcius")

if (document.getElementById("Celcius").checked){

    alert("Celcius");

    document.getElementById("Results").innerHTML = num+"Celcius," +

      (Math.round(num*9/5)+32)+"Fahrenheit";
}
else if (document.getElementById("Fahrenheit").checked){

    alert("Fahrenheit");

    document.getElementById("Results").innerHTML = num+"Fahrenheit," +

      (Math.round(num-32)*5/9)+"Celcius";

}
return false;

Answer 1

首先，由于此表单实际上不在任何地方提交数据，因此您不需要submit按钮。您只需要常规的button。

接下来，您在此行上的功能名称拼写错误：

document.forms["form1"]["submit"].onclick = Caculate; // << Should be: Calculate

现在，您还使用.addEventListener设置了一个回调，然后设置了实际的回调（上述）。这是浪费的步骤。只需设置按钮单击即可。

当您没有为元素提供.getElementById()时，您尝试使用id来引用这些元素。它们可能带有该字符串的value或name，但没有id。

请参见下面的其他注释：

// Get a reference to the "button" (not submit button) that will trigger the 
// function and set up a click (not submit) event handler for it:
document.querySelector("input[type='button']").addEventListener("click", Calculate);

function Calculate() {
  var temp = parseFloat(document.getElementById("temp").value);
  if(isNaN(temp)){
    alert("You must enter a number!")
    return false;
  }
   
  // You don't need a reference to each radio button. Since they are mutually
  // exclusive, you just need to get the value of the one that is checked.
  var checkedButton = document.querySelector("input[name='FC']:checked");
  
  if(checkedButton) {
    var unit = checkedButton.value;
    alert(unit);
  } else {
    alert("You must make a selection!");
    return false;
  }  
  
  // If we've gotten this far, then there is a unit and a number
  var convertedValue = null;
 
  // You don't need to build up the entire output string twice. Just do the math.
  if(unit === "Farenheight"){
    convertedValue =  Math.round(temp -32) * 5/9;
  } else {
    convertedValue = Math.round(temp * 9/5) + 32;
  }
  
  // Then build the final message.
  // Don't use innerHTML when the string doesn't have any HTML, use .textContext:
  document.getElementById("results").textContent = convertedValue + " " + unit;
}

<form method = "post" action = "tempcon.php" name = "form1">
  Temperature: <input type="text" id="temp" name="temp"> <br>
  <input type = "radio" name = "FC" value = "Farenheight"> Convert to Fahrenheit<br>
  <input type="radio" name="FC" value="Celcius"> Convert to Celcius<br>
  <input type="button" name="submit" value="Calculate!">
</form>
<div id = "results"></div>

也：Don't use self-terminating tag syntax.

Java的临时转换

1 个答案: