使用内联JavaScript重构代码

Question

I'm trying to refactor this w3schools for a toggleable tabs code because all of us know that using inline JavaScript is a very bad practice so I'm trying to sepearte them as much as possible so I selected the tablinks and I added an event listener but I'm struggling with the city names (take a look to their code and you'll understand what I'm talking about)

any help please and thank you in advance

HTML

<!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<!-- Tab content -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

CSS

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

JavaScript

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

Answer 1

w3schools is a very good source of bad practice, because they often take many shortcuts while trying to highlight the one small example they are giving.

In practice, you would solve this situation by using a data- attribute. If you don't recognize some of the calls, please refer to some of these articles:

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
• https://developer.mozilla.org/en-US/docs/Glossary/IIFE
• https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
• https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

 // Wrap our code in an IIFE in order to avoid polluting the global namespace // and to facilitate faster garbage collection (function(){ // Preload queries for later use const tabs = document.querySelectorAll('.tablinks'); const content = document.querySelectorAll('.tabcontent'); // iterate tab to create content interaction tabs.forEach(f => // f will be the tab element in this loop // Assign click event to each tab f.addEventListener('click',function(){ // Locate any previously marked active tab element const prevActive = document.querySelector('.tablinks.active'); // If a previously marked element exists set its classname to default if(prevActive) prevActive.className = 'tablinks'; // Assign the currently clicked tab element the active class f.className = 'tablinks active'; // Iterate through the content to look for the data-attribute we used earlier content.forEach(c => { // c will be the content element in this loop // if the id of the element matches the data attribute from the tab then show the content c.style.display = c.id == f.getAttribute("data-city") ? "block" : "none" ; }) }) ); })(); 

 .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons that are used to open the tab content */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } 

 <div class="tab"> <button class="tablinks" data-city="London">London</button> <button class="tablinks" data-city="Paris">Paris</button> <button class="tablinks" data-city="Tokyo">Tokyo</button> </div> <!-- Tab content --> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> 

Answer 2

    <button id="London" class="tablinks">London</button>


    var btns = document.querySelectorAll('.tab button')

        btns.forEach((btn)=>{
            btn.addEventListener('click', (event)=>{
               openCity(event, btn.id, btn)
            })
        })

Give each button an id with the city name, then pass the id to the openCity function

You can pass the btn to your openCity function too