ボタン/リンク上の同じID /クラスで<h4>のテキストを更新します。

Question

「modal-title」と同じクラスの2つの<h4>と、IDが&クラスの2つのボタン - 「予約」と「お問い合わせ」があります。 「予約」ボタンを押すと、H4が「予約」に変更され、「お問い合わせ」ボタンをクリックすると、H4のテキストがそれに応じて変更されます。

問題は、固定ボタンH4と同じボタンを使用する2つのコンテナがあります。コンテナ1で「予約」ボタンを使用すると、H4が正常に変更されます。 Inquire "ボタンをコンテナ2に挿入すると、H4要素は" Inquire "テキストに更新されませんが、代わりにContainer 1の" Inquire "ボタンを使用すると変更されます。何故ですか？そして、私はそれらを同時に機能させることができますか？ （並行して）実際には、これを達成する簡単な方法がありますか？

<h4 class="modal-title" id="modal-title">Modal Heading</h4> 

コンテナ1：

<div class="col-sm-6 col-md-6"> 
    <a id="reserve" class="reserve">Change to Reserve</a> 
    <a id="enquire" class="enquire">Change to Enquire</a> 
</div> 

コンテナ2：

<div class="col-sm-6 col-md-6"> 
    <a id="enquire" class="enquire">Change to Enquire</a> 
    <a id="reserve" class="reserve">Change to Reserve</a> 
</div> 

はJavaScript：

var btnEnquire = document.getElementById("enquire"); 
var btnReserve = document.getElementById("reserve"); 
btnEnquire.onclick = function(){ 
    var enquireTxt = document.getElementsByClassName("modal-title"); 
    for (var i = 0; i < enquireTxt.length; i++) { 
     enquireTxt[i].innerText = "Enquire"; 
    } 
} 
btnReserve.onclick = function(){ 
    var reserveTxt = document.getElementsByClassName("modal-title"); 
    for (var i = 0; i < reserveTxt.length; i++) { 
     reserveTxt[i].innerText = "Reserve"; 
    } 
} 

（数StackOverflowのコメントによると、これが唯一の方法ですgetEを使用するときに値を返すlementsByClassName）

Answer 1

ここでは、idの重複を避けることができるが、要素のグループを処理する方法の例を示します。それは、それを抽出して関数の繰り返しを分離し、ボタンのクリックによって必要なデータを含む関数を呼び出すだけです。

window.addEventListener("DOMContentLoaded", function(){ 
 
    var btnEnquire = document.getElementById("btnEnquire"); 
 
    var btnReserve = document.getElementById("btnReserve"); 
 

 
    var modals = document.getElementsByClassName("modal-title"); 
 

 
    // 1. You can keep the button event handlers separate ***** 
 
    btnEnquire.addEventListener("click", function(){ 
 
    changeVal("Enquire"); 
 
    }); 
 

 
    btnReserve.addEventListener("click", function(){ 
 
    changeVal("Reserve"); 
 
    }); 
 
    // ********************************************************* 
 
    
 
    // 2. Or, you could combine into more compact code: ******** 
 
    var buttons = document.querySelectorAll(".myButton"); 
 
    buttons.forEach(function(button){ 
 
    button.addEventListener("click", function(){ 
 
     changeVal(this.textContent); 
 
    }); 
 
    }); 
 
    // ********************************************************* 
 

 
    // The main functionality has been extracted and exists only once 
 
    // However, it will produce different results based on what you 
 
    // pass into it. 
 
    function changeVal(val){ 
 
    for (var i = 0; i < modals.length; i++) { 
 
     modals[i].textContent = val; 
 
    } 
 
    } 
 
});

<button id="btnEnquire" class="myButton">Enquire</button> 
 
<button id="btnReserve" class="myButton">Reserve</button> 
 

 
<h4 class="modal-title" id="modal-title">Modal Heading</h4> 
 
Container 1: 
 

 
<div class="col-sm-6 col-md-6"> 
 
    <a id="reserve" class="reserve">Change to Reserve</a> 
 
    <a id="enquire" class="reserve">Change to Enquire</a> 
 
</div> 
 

 
<h4 class="modal-title" id="modal-title">Modal Heading</h4> 
 
Container 2: 
 

 
<div class="col-sm-6 col-md-6"> 
 
    <a id="enquire" class="reserve">Change to Enquire</a> 
 
    <a id="reserve" class="reserve">Change to Reserve</a> 
 
</div>

Answer 2

あなたは複数の要素に同じIDを割り当てることはありません。代わりに、クラス参照のみを使用し、結果をループします（「modal-title」で行ったように）クリックハンドラを追加します。

var btnEnquire = document.getElementsByClassName("enquire"); 
 
var btnReserve = document.getElementsByClassName("reserve"); 
 

 
for (var i = 0; i < btnEnquire.length; i++) { 
 
    btnEnquire[i].onclick = function(){ 
 
    var enquireTxt = document.getElementsByClassName("modal-title"); 
 
     for (var i = 0; i < enquireTxt.length; i++) { 
 
      enquireTxt[i].innerText = "Enquire"; 
 
     } 
 
    } 
 
} 
 

 
for (var i = 0; i < btnReserve.length; i++) { 
 
    btnReserve[i].onclick = function(){ 
 
    var reserveTxt = document.getElementsByClassName("modal-title"); 
 
     for (var i = 0; i < reserveTxt.length; i++) { 
 
      reserveTxt[i].innerText = "Reserve"; 
 
     } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h4 class="modal-title" id="modal-title">Modal Heading</h4> 
 

 
<div class="col-sm-6 col-md-6"> 
 
    <a class="reserve" href="#">Change to Reserve</a> 
 
    <a class="enquire" href="#">Change to Enquire</a> 
 
</div> 
 

 
<div class="col-sm-6 col-md-6"> 
 
    <a class="enquire" href="#">Change to Enquire</a> 
 
    <a class="reserve" href="#">Change to Reserve</a> 
 
</div>

あなたは、ネストされたループを必要としないようにだけmodal-titleのIDを使用するクリーナーにもなるでしょう。