Question 44889 in Html Question posted in
Some basic documentation can be found here.

why are my tabs button stop working after 1 click – Html

<div id="main_container_writting">
  <h2 class="curency" id="curency">0 words</h2>
  <div id="progress">
    <progress id="myProgress" value="0" max="100"></progress>
  </div>
  <button onclick="updateProgressBar()", id="think_button">think</button>
  <nav id="nav_buttons">
    <button id="writting_tab_button">writting</button>
    <button id="upgrades_tab_button">upgrades</button>
    <button id="options_tab_button">options</button>
    <p>asd</p>
  </nav>    
</div>
<div id="main_container_upgrades">
  <h2 class="curency" id="curency">0 words</h2>
  <div id="progress">
    <progress id="myProgress" value="0" max="100"></progress>
  </div>
  <nav id="nav_buttons">
    <button id="writting_tab_button">writting</button>
    <button id="upgrades_tab_button">upgrades</button>
    <button id="options_tab_button">options</button>
    <p>asd2</p>
  </nav>  
</div>
<div id="main_container_options">
  <h2 class="curency" id="curency">0 words</h2>
  <div id="progress">
    <progress id="myProgress" value="0" max="100"></progress>
  </div>
  <nav id="nav_buttons">
    <button id="writting_tab_button">writting</button>
    <button id="upgrades_tab_button">upgrades</button>
    <button id="options_tab_button">options</button>
    <p>asd3</p>
  </nav>  
</div>

let main_container_writting = document.getElementById("main_container_writting");
let main_container_upgrades = document.getElementById("main_container_upgrades");
let main_container_options = document.getElementById("main_container_options");
let writing_tab = document.getElementById("writting_tab_button");
let upgrades_tab = document.getElementById("upgrades_tab_button");
let options_tab = document.getElementById("options_tab_button");

writing_tab.addEventListener("click", function() {
  main_container_writting.style.display = "block";
  main_container_upgrades.style.display = "none";
  main_container_options.style.display = "none";
});

upgrades_tab.addEventListener("click", function() {
  main_container_writting.style.display = "none";
  main_container_upgrades.style.display = "block";
  main_container_options.style.display = "none";
});

options_tab.addEventListener("click", function() {
  main_container_writting.style.display = "none";
  main_container_upgrades.style.display = "none";
  main_container_options.style.display = "block";
});

#main_container_upgrades {
  display: none;
  text-align: center;
}

#main_container_writting  {
  display: block;
  text-align: center;
}

#main_container_options {
  display: none;
  text-align: center;
}

i tried everything i know and it doen’t work i expect the buttons to change beetwen the tabs i create
or for a potentialy a better way to tackle this problem i tried everything i know and it doen’t work i expect the buttons to change beetwen the tabs i create
or for a potentialy a better way to tackle this problem

Tags:

2

Answers


  1. 0

    You have multiple buttons with the SAME id. IDs can’t be reused on the same page.

    To simplify your code, I removed all of the extra code and limited it to one set of buttons. I also gave each button a data target so when that button is clicked, you can reference that data to know what div to show. For showing/hiding I’m using a css class of ACTIVE. Javascript has the ability to toggle/add and remove classes from objects.

    Also, I attach my event listener to the document.body and only create a single click handler no matter how many buttons are on the page.

    document.body.addEventListener("click",(e) => {
  if(e.target.dataset.tabtarget){
    const active = document.querySelector(".tab-content.active");
    if(active){
      active.classList.remove("active")
    }
     const _target = document.querySelector(e.target.dataset.tabtarget);
     _target.classList.add("active");
  }
});
    .tab-content{
  display: none;
  text-align: center;
}

.tab-content.active{
  display:block;
}
    <button onclick="updateProgressBar()", id="think_button">think</button>
<nav id="nav_buttons">
    <button data-tabTarget="#main_container_writting">writting</button>
    <button data-tabTarget="#main_container_upgrades">upgrades</button>
    <button data-tabTarget="#main_container_options">options</button>
  </nav>  

<h2 class="curency" id="curency">0 words</h2>
  <div id="progress">
    <progress id="myProgress" value="0" max="100"></progress>
  </div>

<div class="tab-content" id="main_container_options">
    <p>asd3</p>
</div>

<div class="tab-content" id="main_container_upgrades">
    <p>asd2</p>
</div>

<div class="tab-content" id="main_container_writting">
    <p>asd</p>
</div>
    Login or Signup to reply.
  2. 0

    You shouldn’t use id the same Id for two or more elements, it’s better to set the buttons just once then change the tabs content like this:

    let main_container_writting = document.getElementById("main_container_writting");
let main_container_upgrades = document.getElementById("main_container_upgrades");
let main_container_options = document.getElementById("main_container_options");
let writing_tab = document.getElementById("writting_tab_button");
let upgrades_tab = document.getElementById("upgrades_tab_button");
let options_tab = document.getElementById("options_tab_button");

writing_tab.addEventListener("click", function() {
  main_container_writting.style.display = "block";
  main_container_upgrades.style.display = "none";
  main_container_options.style.display = "none";
});

upgrades_tab.addEventListener("click", function() {
  main_container_writting.style.display = "none";
  main_container_upgrades.style.display = "block";
  main_container_options.style.display = "none";
});

options_tab.addEventListener("click", function() {
  main_container_writting.style.display = "none";
  main_container_upgrades.style.display = "none";
  main_container_options.style.display = "block";
});
    #main_container_upgrades {
  display: none;
  text-align: center;
}

#main_container_writting  {
  display: block;
  text-align: center;
}

#main_container_options {
  display: none;
  text-align: center;
}

.nav-container {
  text-align: center;
}
    <div id="main_container_writting">
  <h2 class="curency" id="curency">0 words - wriring</h2>
  <div id="progress">
    <progress id="myProgress" value="0" max="100"></progress>
  </div>
  <button onclick="updateProgressBar()" id="think_button">think</button>  
  <p>asd</p>
</div>

<div id="main_container_upgrades">
  <h2 class="curency" id="curency">0 words - upgrades</h2>
  <div id="progress">
    <progress id="myProgress" value="0" max="100"></progress>
  </div>
  <p>asd2</p>
</div>
<div id="main_container_options">
  <h2 class="curency" id="curency">0 words - options</h2>
  <div id="progress">
    <progress id="myProgress" value="0" max="100"></progress>
  </div>
  <p>asd3</p>
</div>

<div class="nav-container">
  <nav id="nav_buttons">
      <button id="writting_tab_button">writting</button>
      <button id="upgrades_tab_button">upgrades</button>
      <button id="options_tab_button">options</button>
  </nav>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search