DOM要素にアクセスできない

Question

別のdivタグに多数のボタンがあるHTMLページがあります。ボタンの1つがクリックされると、私は他のボタンを無効にして、選択されたボタンでdivの背景色を黄色にします。 これはすべて正常に動作していましたが、現在はすべて機能しなくなりました（私は多くの変更を行い、間違ったことを追跡できません）。私はチェックし、私のdocument.getElementById（id）はnullを返します。 私がここでチェックしたすべての解決策は、要素が作成される前にアクセスされている場合に起こると言います。しかし、ボタンをクリックしてDOMエレメントの操作を除いてすべてのコードが正しく機能している場合、どうすればこのことが当てはまりますか？

問題を見つける方法として迷っています。誰かが正しい方向に私を導くことができますか？ここ

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'); 
 

 
}

<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>

私のコードの

パートIは、他のすべての機能が.prop（）との.css（）メソッドを除いて取り組んでいると述べたよう。同じことが他のページで.hide（）と.show（）で起こっています。私はその基本的なことを私が欠けていると思う。

Answer 1

最後に問題が見つかりました。ページャのページを動的に読み込む機能がありました。メインページには、イベントリスナーを持つnav-panelがありました。

main.jsはloadPage（）関数が複製されたように、メインページからイベントリスナーを貼り付け、私はコピーpage-trip-loggerで

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

を提出します。

私はloadPage("page-trip-logger");は再びので、解雇された効果をバウンスに起因するページをロードするためにボタンを押したとき、私は私のpagecontainerに2つのページをロードしていたと思います

$(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"); 
    }); 
}); 

旅行-logger.jsファイルインサイド同じID。 cssのすべての操作は行われましたが、2番目のリロードによって隠されたページの内側にありました。

loadPage機能を絞り込み、コピーを停止して、nav-barコードを貼り付ける必要があります。