Text in Textarea changed everytime I click a different button Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Text in Textarea changed everytime I click a different button without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I am trying to make a site for documents that are stored in textareas. The layout is simple, a textarea containing the text, and a navigation bar at the top. The navigation bar has elements called Page 1 , Page 2 < page 3 and so on.

When I click page 1, the textarea must display what I wrote in page 1 in the past. When I click page 2, it should show me what I wrote in page 2 in the past. A lot like browser tabs. I don’t know how I should do this.

To store the text I write in the textareas, I use a with the hidden attribute, so I can store text there without it being seen. So when in the navigation bar I click “Page 1”, it will do to the division containing the text in page 1, and paste it into the textarea.value.

The script goes like this:

function functionPageOne(){
   var textarea= document.getElementById('textarea');
   var btnp1 = document.getElementById('Page1Btn');
   var div1 = document.getElementById('Page1Div');
   btnp1.onclick = funnction(){
      textarea.value = div1.innerHTML; 
      alert('You are now in document 1')
   }
}

My real problem is how do I create new documents that work just like page 1. It should be able to create a separate DIV with a new ID accessable to the script with a add button. I hope my question makes sense.

Answer

Just create a variable to store the content of the tabs, and create buttons to switch tabs.

When the button is clicked, store the old value of the tab to variable, and then show the value of selected tab.

If the documents need to be shared with other user or the data must persists, you will need a database. But if the documents only need to be shown to current user, you can just use localStorage API.

var tabContents = {
  tab0: "",
  tab1: "content of first tab",
  tab2: "content of 2nd tab",
  tab3: "content of third tab",
}
var lastTab = 0;
// load from localstorage
// if(window.localStorage.tabContents != undefined) tabContents = JSON.parse(window.localStorage.tabContents);

function tab(idx) {
  var textarea = document.getElementById('textarea');

  // save last tab's value
  var tabnameLast = "tab"+lastTab.toString();
  tabContents[tabnameLast] = textarea.value;
  lastTab = idx;
  
  // show new tab's value
  var tabname = "tab"+idx.toString();
  textarea.value = tabContents[tabname];
  
  // save to localstorage
  // window.localStorage.tabContents = JSON.stringify(tabContents);
}

function newtab() {
  //var newtabIdx = tabContents.length;
  var newtabIdx = Object.keys(tabContents).length;
  var newtabName = "tab"+newtabIdx.toString();
  tabContents[newtabName] = "... "+newtabIdx.toString();
  var container_buttons = document.getElementById("container_buttons");
  container_buttons.insertAdjacentHTML('beforeend', '<button onclick="tab('+newtabIdx.toString()+')">tab '+newtabIdx.toString()+'</button>');
  tab(newtabIdx);
}
<textarea id="textarea"></textarea>
<div id="container_buttons">
  <button onclick="tab(1)">tab 1</button>
  <button onclick="tab(2)">tab 2</button>
  <button onclick="tab(3)">tab 3</button>
</div>
<button onclick="newtab()">+</button>

Edit: added function to add new tab

We are here to answer your question about Text in Textarea changed everytime I click a different button - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji