Pregunta

Im trying to make a simple calculator. But it wont work. And I don't know why.

I also use bootstrap

When I press the button the calculator does nothing at all, and I am still unsure what the issue is.

If someone could help me that would be great.

Here is my code

<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>
¿Fue útil?

Solución

Just change your else (if dirBackward) to else if (dirBackward) and it should work

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top