Question

我结合了Carlos给出的JavaScript示例，它的目的是像jstimepicker。我需要它只是jstimepicker不做的几分钟和几秒钟。在空白的php页面中的代码适用于一个文本框但不适用于第二个框。什么不起作用？

因此，按钮类型特定按钮确实修复了提交，但仍然无法正常工作，因为即使使用固定代码，它似乎也不想要第二个输入。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">


    <form action="test.php" method="post">
      <div class="dropdown" style="float:left;">
        <label>Start Time</label>
        <input class="btn btn-default dropdown-toggle" type="text" data-toggle="dropdown" id="screen">

        <span class="caret"></span>
        <ul class="dropdown-menu">
          <li>

            <div id="keypad">
              <?php $end=59; //min $rows=ceil($end/6); $x=0; $start=0; ?>
              <table>
                <h6>minutes</h6>
                <button type="button">:</button>

                <?php while($x<=$rows) { echo "<tr>"; for ($y=0 ; $y < 6; $y++, $start++) { if ($start <=$ end) { echo "<td width=\"30px\ ">"; echo "<button id=\"number\ " type=\"button\ " style=\"width:30px; \ ">"; echo $start; echo "</button>"; echo "</td>"; } } echo
                "</tr>"; $x++; } ?>
              </table>
            </div>


          </li>

        </ul>
      </div>




      <!-- second dropdown menu: -->


      <div class="dropdown" style="float:left;">

        <label>End time</label>
        <input class="btn btn-default dropdown-toggle" type="text" data-toggle="dropdown" id="screen_end">

        <span class="caret"></span>
        <ul class="dropdown-menu">
          <li>

            <div id="keypad2">
              <?php $end=59; //seconds $rows=ceil($end/6); $x=0; $start=0; ?>
              <table>
                <h6>minutes / seconds</h6>
                <button>:</button>

                <?php while($x<=$rows) { echo "<tr>"; for ($y=0 ; $y < 6; $y++, $start++) { if ($start <=$ end) { echo "<td width=\"30px\ ">"; echo "<button id=\"number\ " type=\"button\ " style=\"width:30px; \ ">"; echo $start; echo "</button>"; echo "</td>"; } } echo
                "</tr>"; $x++; } ?>
              </table>
            </div>


          </li>

        </ul>
      </div>

      <input type="submit">

    </form>






    <script type='text/javascript'>
      //<![CDATA[

      window.onload = function() {
        var screen = document.getElementById('screen'),
          keypad = document.getElementById('keypad'),
          buttons = keypad.getElementsByTagName('button');
        for (var i = 0; i < buttons.length; i++) {
          buttons[i].onclick = function() {
            screen.value = screen.value + this.innerHTML;
            return false;
          };
        }
      };
       //]]>
    </script>

    <script type='text/javascript'>
      //<![CDATA[

      window.onload = function() {
        var screen_end = document.getElementById('screen_end'),
          keypad2 = document.getElementById('keypad2'),
          buttons = keypad.getElementsByTagName('button');
        for (var i = 0; i < buttons.length; i++) {
          buttons[i].onclick = function() {
            screen_end.value = screen_end.value + this.innerHTML;
            return false;
          };
        }
      };
       //]]>
    </script>



  </div>
</body>

</html>

Answer 1

这里的代码有几个问题：

不重要：

由于您的DOCTYPE表示HTML5，因此您不需要type='text/javascript'元素上的<script>属性。
此外，您不需要//<![CDATA[制作。
ID必须是整个页面的唯一ID。考虑将for循环的索引添加到id。

这些不会引起问题，但这只是一种很好的做法。

重要的事情：

导致问题的原因是您的第二个<script>会覆盖您为window.onload定义的功能

相反，将两者合并在一个函数中。

window.onload = function () {
   var screen = document.getElementById('screen'),
       keypad = document.getElementById('keypad'),
       buttons = keypad.getElementsByTagName('button');
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].onclick = function() {
        screen.value = screen.value + this.innerHTML;
        return false;
      };
    }
    var screen_end = document.getElementById('screen_end'),
        keypad2 = document.getElementById('keypad2'),
        buttons2 = keypad2.getElementsByTagName('button');
    for (var j = 0; j < buttons2.length; j++) {
      buttons2[j].onclick = function() {
        screen_end.value = screen_end.value + this.innerHTML;
        return false;
      };
    }
};

但请注意，在您的第二个window.onload中，您已宣布keypad2，但是当您获得buttons时，您在keypad而不是{{1}下查找按钮}}。我已经改变了上述内容，并为第二个keypad2集合定义了一个新变量。

Answer 2

所有按钮都具有相同的ID，尝试为每个按钮设置不同的ID或使用类。

用于输入时间的Javascript代码

2 个答案:

不重要：

重要的事情：