Question

好的，所以我的代码如下。单击计算价格按钮后，我希望它显示按钮下方的结果。即。汽车数量= CarNumber，汽车类型= CarType和汽车价格= CarPrice。我知道这可能非常容易，但我无法让它发挥作用。

HTML：

<!DOCTYPE html>
<html>
<body>
<form name="Cars">
<h1>Car Sales</h1>
<p>Which type of car would you like (A, B or C)</p>
<input type="text" name="CarType"><br>
<p>how many cars would you like (1-100)</p>
<input type="text" name="CarNumber"><br>
<br>
<button onclick="return beginfunction()">Calculate Price</button>
<p id="message"></p>
<script src="car.js">   </script>
 </form>
 </body>
</font>

JavaScript的：

function beginfunction() {
  var CarType = document.forms["Cars"]["CarType"].value;
  var CarNumber = document.forms["Cars"]["CarNumber"].value;
   var CarPrice;
   if ( !( CarType == 'A' || CarType == 'B' || CarType == 'C' ) ) {
    CarTypeError = "Invalid Car Type";
     document.getElementById("message").innerHTML = CarTypeError;
     return false;

  }


  {
      if (isNaN(CarNumber)) {
        CarNumberError = "Invalid Quantity Entered";
        document.getElementById('message').innerHTML = CarNumberError;
          return false;
      }

  }
{
  if (CarNumber >0 && CarNumber <10)
  {

  }
   else
  CarError = "Invalid";
   document.getElementById('message').innerHTML = CarError;
  return false;
}
{
 if (CarType == 'A') {
    CarPrice = 30;
} else if (CarType == 'B') {
    CarPrice = 20;
}  else if (CarType == 'C'){
  CarPrice = 10;
 }
}

}

Answer 1

你使用innerHTML的方式是正确的，但你的函数中存在一些逻辑问题，这里是重构的代码：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Palindrome Checker</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="../public/css/palindromes.css" />
    <script type="text/javascript" src="./palindromeCheck.js"></script>
  </head>
  <body>
      <header>
          <a href="./index.html"><img src="../public/images/Palindrome.png" alt="logo" width="350" /></a>
          <h3> Palindrome Checker: </h3>
      </header>
    <form name="textarea" id="form3" autocomplete="off" method="get">
        <fieldset>
            <legend class="legend">What phrase do you want to check: </legend>
            <label class="labelitem">Input phrase:</label>
            <input type="text" name="input" id="input" size="40" maxlength="40"
               placeholder="Your Phrase Here" required pattern="[a-zA-Z][a-zA-Z'\- ]*"
               title="Just Input the Phrase" />
            <button type="submit" id="submit" class="btn btn-default">Submit</button>
            <br />
            <script>
                document.addEventListener("submit", function (e) { palindrome(document.getElementById("input")); e.preventDefault(); });
            </script>
        </fieldset><br/>

        <fieldset>
            <legend class="legend">History: </legend>
            <ul id="history">
                <li class="is_palindrome">aba</li>
                <li class="not-palindrome">abc</li>
                <li class="not-palindrome">aeraa</li>
            </ul>
        </fieldset>

      </form>
      <br />
      <br />
      <footer id="footnote">
          Weizhe Dou
          <br />
          ID:10400406
          <br />
          copyright reserved
      </footer>
  </body>
</html>

不确定如何使用getelementbyId // javascript显示结果

1 个答案: