javascript - Onclick 没有调用 javascript 函数

Question

我在带有按钮的 HTML 页面中有一些 JavaScript 代码。我有两个名为“total()”和“con()”的函数，用于处理两个按钮的 onClick 事件。我尝试将 script 标签放在表单、按钮的顶部，我也尝试将它放在 head 标签中。按钮的代码如下

问题是当点击按钮时，函数没有被调用。我在这里做错了什么？

谢谢你没有批评我，我只是一个初学者。

function con() {
  var conf = confirm('Are you finished?');
  if (conf) {
    return true
  } else {
    return false
  }
}

function total() {
  // Some Code here
}

<form action="reserve.php" method="POST">
  <div class="tick"><img class="ticket" src='assets/img/<?php 
                   echo($row["Photo"]);?>' style='margin-top:10px;'>

    <h4>
      <?php echo($row["Event_Name"]); ?>
    </h4>
    <div class="table-responsive1">
      <table class="table">
        <tr>
          <th>No. Of Persons</th>
          <th>
            <select class="form-control select2" name="Ticks" id="p" required="">
			    <option selected="">Select # of Persons</option>
                <option value="1">Admit One</option>
                <option value="2">Admit Two</option>
                <option value="3">Admit Three</option>
                <option value="4">Admit Four</option>
                <option value="5">Admit Five</option>
            </select>
          </th>
        </tr>
        <tr>
          <th>Zone</th>
          <th>
            <select class="form-control select1" name="TickType" id="z" required="">
						<option value="" selected="">Select a zone</option>
                            <option value="ga" id="ga" name="TickType">General Admission</option>
                            <option value="b" id="b">Bronze</option>
                            <option value="s" id="s">Silver</option>
                            <option value="g" id="g">Gold</option>
                            <option value="p" id="p">Platinum</option>
                            <option value="v" id="v">Vip</option>
                        </select>
          </th>
        </tr>

        <div class="table-responsive">
          <table class="table">
            <thead>
              <h3>Prices</h3>
              <tr>
                <th>Gen. Admission</th>
                <th>Bronze</th>
                <th>Silver</th>
                <th>Gold</th>
                <th>Platinum</th>
                <th>VIP</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td id="ge">
                  <?php echo($row["GenAd_Price"]);?>~Php</td>
                <td id="br">
                  <?php echo($row["Bronze_Price"]);?>~Php</td>
                <td id="si">
                  <?php echo($row["Silver_Price"]);?>~Php</td>
                <td id="go">
                  <?php echo($row["Gold_Price"]);?>~Php</td>
                <td id="pl">
                  <?php echo($row["Platinum_Price"]);?>~Php</td>
                <td id="vi">
                  <?php echo($row["Vip_Price"]);?>~Php</td>
              </tr>
            </tbody>
          </table>
        </div>
        <br><br>
        <input type='hidden' length='1' value='<?php echo($row["Event_ID"]); ?>' name='id'>

        <button class="but" type="submit" onclick="return con()">Done</button>
</form>
<h4 id="tot" style="position:absolute; top:80%;">Total: </h4>

<button type="button" class="but" id="btn" onClick="total()">Compute</button>
</div>

Answer 1

该代码对我有用。无论您使用什么，它可能都不支持 confirm()。尝试一下是否有效:

function con() {
  var sentence = document.getElementById("sentence");
  sentence.innerHTML = "Are you finished?";
  document.getElementById("conf1").style.visibility = "visible";
  document.getElementById("conf2").style.visibility = "visible";
}

function isDone(bool) {
  if (bool) {
    // do something
  } else {
    // do something
  }
}

function total() {
  // Some Code here
}

<form action="reserve.php" method="POST">
  <div class="tick"><img class="ticket" src='assets/img/<?php 
                   echo($row["Photo"]);?>' style='margin-top:10px;'>

    <h4>
      <?php echo($row["Event_Name"]); ?>
    </h4>
    <div class="table-responsive1">
      <table class="table">
        <tr>
          <th>No. Of Persons</th>
          <th>
            <select class="form-control select2" name="Ticks" id="p" required="">
              <option selected="">Select # of Persons</option>
              <option value="1">Admit One</option>
              <option value="2">Admit Two</option>
              <option value="3">Admit Three</option>
              <option value="4">Admit Four</option>
              <option value="5">Admit Five</option>
            </select>
          </th>
        </tr>
        <tr>
          <th>Zone</th>
          <th>
            <select class="form-control select1" name="TickType" id="z" required="">
              <option value="" selected="">Select a zone</option>
              <option value="ga" id="ga" name="TickType">General Admission</option>
              <option value="b" id="b">Bronze</option>
              <option value="s" id="s">Silver</option>
              <option value="g" id="g">Gold</option>
              <option value="p" id="p">Platinum</option>
              <option value="v" id="v">Vip</option>
            </select>
          </th>
        </tr>

        <div class="table-responsive">
          <table class="table">
            <thead>
              <h3>Prices</h3>
              <tr>
                <th>Gen. Admission</th>
                <th>Bronze</th>
                <th>Silver</th>
                <th>Gold</th>
                <th>Platinum</th>
                <th>VIP</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td id="ge">
                  <?php echo($row["GenAd_Price"]);?>~Php</td>
                <td id="br">
                  <?php echo($row["Bronze_Price"]);?>~Php</td>
                <td id="si">
                  <?php echo($row["Silver_Price"]);?>~Php</td>
                <td id="go">
                  <?php echo($row["Gold_Price"]);?>~Php</td>
                <td id="pl">
                  <?php echo($row["Platinum_Price"]);?>~Php</td>
                <td id="vi">
                  <?php echo($row["Vip_Price"]);?>~Php</td>
              </tr>
            </tbody>
          </table>
        </div>
        <br><br>
        <input type='hidden' length='1' value='<?php echo($row["Event_ID"]); ?>' name='id'>

        <button class="but" type="submit" onclick="return con()">Done</button>
</form>
<h4 id="tot" style="position:absolute; top:80%;">Total: </h4>

<button type="button" class="but" id="btn" onClick="total()">Compute</button>
<p id="sentence"></p>
<button id="conf1" style="visibility: hidden" onclick="isDone(true)">Yes</button>
<button id="conf2" style="visibility: hidden" onclick="isDone(false)">No</button>
</div>

注意:这只是一个示例。您不必使用这个。