Question

我想制作一个简单的计算器。但它不会工作。我不知道为什么。

我也使用bootstrap

当我按下按钮时，计算器什么都不做，我仍然不确定是什么问题。

如果有人可以帮助我那会很棒。

这是我的代码

<head>
<script language="javascript">

function Convert()
{
    var ratUnit1 = document.getElementById("ratUnit1").value;
    var ratNum1 = document.getElementById("ratNum1").value;
    var ratUnit2 = document.getElementById("ratUnit2").value;
    var dirForward = document.getElementById("dirForward").checked;
    var dirBackward = document.getElementById("dirBackward").checked;
    var amoInput = document.getElementById("amoInput").value;

if (dirForward)
{
    document.getElementById("resNum1").value = amoInput;
    document.getElementById("resUnit1").value = ratUnit1;
    document.getElementById("resNum2").value = amoInput*ratNum1;
    document.getElementById("resUnit2").value = ratUnit2;
}
else (if dirBackward)
{
    document.getElementById("resNum1").value = amoInput;
    document.getElementById("resUnit1").value = ratUnit2;
    document.getElementById("resNum2").value = amoInput/ratNum1;
    document.getElementById("resUnit2").value = ratUnit1;
}
}
</script>
</head>

<body>

<!--Nav Bar-->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Unit Converter</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
      </ul>
    </div>
  </div>
</div>

<!--Page Container-->
<div class="container">

<!--Header-->
<div class="page-header">
  <h1>Welcome to the Unit Converter!</h1>
</div>

<!--Conversion Ratio-->
<div class="jumbotron">
  <h2>Conversion Ratio</h2>
  <br>
  <form class="form-inline">
    <div class="form-group">
      <label>1</label>    
      <input id="ratUnit1" type="text" class="form-control" value="Kilometre">   
    </div>
    <div class="form-group">
      <label>Equals</label>
      <input id="ratNum1" type="text" class="form-control" value="0.621">
    </div>
    <div class="form-group">    
      <input id="ratUnit2" type="text" class="form-control" value="Miles">   
    </div>
  </form>
</div>

<!--Conversion Direction-->
<div class="jumbotron">
  <h2>Conversion Direction</h2>
  <br>
  <form class="form-inline">
    <div class="form-group">   
      <input id="dirForward" name="direction" type="radio">
      <label>Kilometres to Miles</label>
    </div>
    <br>
    <div class="form-group">
      <input id="dirBackward" name="direction" type="radio">
      <label>Miles to Kilometres</label>
    </div>
  </form>
</div>

<!--Conversion Amount-->
<div class="jumbotron">
  <h2>Conversion Amount</h2>
  <br>
  <form class="form-inline">
    <div class="form-group">   
      <input id="amoInput" type="text" class="form-control" value="100">
    </div>
    <br><br>
    <div class="form-group">
      <input id="btnConvert" type="button" value="Convert!" class="btn btn-primary btn-lg" onClick="Convert()"/>
    </div>
  </form>
</div>

<!--Conversion Results-->
<div class="jumbotron">
  <h2>Conversion Results</h2>
  <br>
  <form class="form-inline">
    <div class="form-group">   
      <input id="resNum1" type="text" class="form-control" value="100">   
    </div>
    <div class="form-group">   
      <input id="resUnit1" type="text" class="form-control" value="Kilometres">   
    </div>
    <div class="form-group">
      <label>Equals</label>
      <input id="resNum2" type="text" class="form-control" value="62.1">
    </div>
    <div class="form-group">    
      <input id="resUnit2" type="text" class="form-control" value="Miles">   
    </div>
  </form>
</div>

</div>

</body>

Answer 1

只需将您的else (if dirBackward)更改为else if (dirBackward)即可正常使用

Javascript单位转换器

1 个答案: