Question

我有一个HTML页面，在单独的div标签中有许多按钮。当单击其中一个按钮时，我禁用其他按钮并使用所选按钮黄色制作div的背景颜色。所有这一切都运行良好，但现在都停止了工作（我做了很多改变，无法追踪出错的地方）。我检查过，我的document.getElementById（id）返回null。我在这里检查的所有解决方案都说如果在创建元素之前访问该元素，就会发生这种情况。但是，如果我单击按钮并且除了操作DOM元素之外所有代码都正常工作，这怎么可能是真的。

我迷失了如何找到问题。有人可以指导我朝正确的方向发展吗？

我的部分代码

＆＃13;

function anyLogging() {
  toastMessage("Tracking Started. Dont forget to stop when done");
  tLogger.startTripPressed = true;
  tLogger.stopTripPressed = false;
  tLogger.loggingData = true;
  document.getElementById("walking-start").disabled = true;
  $('#walking-start').prop('disabled', true);
  $('#bus-start').prop('disabled', true);
  $('#cycling-start').prop('disabled', true);
  $('#car-start').prop('disabled', true);
  markRow();
}

function anyLoggingStopped() {
  unmarkRow();
  tLogger.mode = "";
  tLogger.startTripPressed = false;
  tLogger.stopTripPressed = true;
  tLogger.loggingData = false;
  $('#walking-start').prop('disabled', false);
  $('#bus-start').prop('disabled', false);
  $('#cycling-start').prop('disabled', false);
  $('#car-start').prop('disabled', false);


}

function markRow() {
  var row = tLogger.mode;
  console.log(row);
  divName = "#" + row + "-section";
  console.log(divName);
  $(divName).css('background', 'yellow');
}

function unmarkRow() {
  var row = tLogger.mode;
  console.log(row);
  divName = "#" + row + "-section";
  $(divName).css('background', 'white');

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="walking-section" style="height:90px;margin-bottom:10px;">
  <table>
    <tr>
      <td>
        <h6 class="padding-lr" style="">Walking</h6>
      </td>
      <td>
        <img src="img/walk2.png" width="24" height="24">
      </td>
    </tr>
  </table>
  <div class="row">
    <div class="col-xs-5 col-sm-4 col-xs-offset-1 col-sm-offset-2">
      <button id="walking-start" class="btn-danger btn-lg custom-prop" style="background-color:#2c742a;">
                                        Start
                                </button>
    </div>
    <div class="col-xs-5 col-sm-4">
      <button id="walking-stop" class="btn-danger btn-lg custom-prop" style="background-color:#33506e;">
                                        Stop
                                </button>
    </div>
  </div>
  <div id="msg-board-walking">
    <p id="msg-board-walking-p">

    </p>
  </div>
</div>
<div id="bus-section" style="height:90px;margin-bottom:10px;">
  <table>
    <tr>
      <td>
        <h6 class="padding-lr" style="font-family: 'Work Sans', sans-serif;">On the Bus</h6>
      </td>
      <td>
        <img src="img/bus2.png" width="24" height="24">
      </td>
    </tr>
  </table>
  <div class="row">
    <div class="col-xs-5 col-sm-4 col-xs-offset-1 col-sm-offset-2">
      <button id="bus-start" class="btn-danger btn-lg custom-prop" style="background-color:#2c742a;">
                                        Start
                                </button>
    </div>
    <div class="col-xs-5 col-sm-4">
      <button id="bus-stop" class="btn-danger btn-lg custom-prop" style="background-color:#33506e;">
                                Stop
                                </button>
    </div>
  </div>
  <div id="msg-board-bus">
    <p id="msg-board-bus-p">
    </p>
  </div>
</div>

＆＃13;

正如我所说的，除了.prop（）和.css（）方法之外，所有其他功能都在工作。在其他页面上使用.hide（）和.show（）也是如此。我认为这是我缺少的基本内容。

Answer 1

所以我终于找到了问题。我有一个在pagecontainer中动态加载页面的功能。在主页面上，我有一个带有事件监听器的导航面板。

main.js文件

$(document).on("click", "#record-trip", function(){
        console.log("click registered");
        loadPage("page-trip-logger");
    });

在page-trip-logger我复制从主页面粘贴了事件监听器，因此loadPage（）函数被复制了。

在trip-logger.js文件中

$(document).ready(function() {

    $(document).on("click", "#nearest-stops", function(){
        console.log("click registered");
        loadPage("page-bus-schedule");
    });

    $(document).on("click", "#record-trip", function(){
        console.log("click registered");
        loadPage("page-trip-logger");
    });
});

我认为当我按下按钮加载页面时由于弹跳效果，loadPage("page-trip-logger");再次被触发，所以我在页面容器中加载了两个页面，并且ID相同。所有对css的操作都已完成，但是在第二次重新加载时隐藏的页面内。

需要优化我的loadPage函数并停止复制粘贴导航条代码。

无法访问DOM元素

1 个答案: