Main page textarea changes

user_16487101 0
Viewed 91

If anyone from the forum can help it would be much appreciated.

Here is a script I have, by clicking a button, textarea changes, but the issue I have is the page always opens with a textarea.one visible as in CSS I have display:none for textarea.two and textarea.three.

My question is if before this page I have another page with 3 links and by clicking

link 1 - this script opens, textarea.one is visible, textarea.two and textarea.three are hidden. link 2 - this script opens, textarea.two is visible, textarea.one and textarea.three are hidden. link 3 - this script opens, textarea.three is visible, textarea.one and textarea.two are hidden.

Something similar to the language selection, if I have selected language on the page, it already knows that it should start with textarea.two visible instead of textarea.one and all similar pages will be opened based on this first choice of 'language'.

function hide1() {
  document.querySelector("textarea.one").style.display = "block";
  document.querySelector("textarea.two").style.display = "none";
  document.querySelector("textarea.three").style.display = "none";
  document.querySelector("button.menucopy1").style.display = "block";
  document.querySelector("button.menucopy2").style.display = "none";
  document.querySelector("button.menucopy3").style.display = "none";
}

function hide2() {
  document.querySelector("textarea.one").style.display = "none";
  document.querySelector("textarea.two").style.display = "block";
  document.querySelector("textarea.three").style.display = "none";
  document.querySelector("button.menucopy1").style.display = "none";
  document.querySelector("button.menucopy2").style.display = "block";
  document.querySelector("button.menucopy3").style.display = "none";
}

function Copytextfunction2() {
  var value = document.getElementById("myInput2").value;
  var copyText = document.createElement("textarea");
  copyText.value = value;
  copyText.style.position = "fixed";
  copyText.style.top = "-1000vh";
  document.body.append(copyText);
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand("copy");
  console.log(value);
  copyText.remove();
}

function Copytextfunction3() {
  var value = document.getElementById("myInput3").value;
  var copyText = document.createElement("textarea");
  copyText.value = value;
  copyText.style.position = "fixed";
  copyText.style.top = "-1000vh";
  document.body.append(copyText);
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand("copy");
  console.log(value);
  copyText.remove();
}

function Copytextfunction1() {
  var value = document.getElementById("myInput1").value;
  var copyText = document.createElement("textarea");
  copyText.value = value;
  copyText.style.position = "fixed";
  copyText.style.top = "-1000vh";
  document.body.append(copyText);
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand("copy");
  console.log(value);
  copyText.remove();
}

function hide3() {
  document.querySelector("textarea.one").style.display = "none";
  document.querySelector("textarea.two").style.display = "none";
  document.querySelector("textarea.three").style.display = "block";
  document.querySelector("button.menucopy1").style.display = "none";
  document.querySelector("button.menucopy2").style.display = "none";
  document.querySelector("button.menucopy3").style.display = "block";
}
<textarea class="one" id="myInput1" name="myInput1" readonly>
One
One
One</textarea>
</div>

<div class="textniz">
  <textarea class="two" id="myInput2" name="myInput2" readonly>
Two
Two
Two</textarea>
</div>

<div class="textniz">
  <textarea class="three" id="myInput3" name="myInput3" readonly>
Three
Three
Three</textarea>
</div>


<div class="navbar">
  <div class="container">
    <a class="logo" href=".//templates/chat.html">test</a>
  </div>
</div>

<div>
  <button class="menu">menu</button>

  <button class="image">image</button>

  <button onclick="hide1()" class="en">hide1</button>
  <button onclick="hide2()" class="gr">hide2</button>
  <button onclick="hide3()" class="ru">hide3</button>

  <button onclick="Copytextfunction1()" class="menucopy1">copy1</button>
  <button onclick="Copytextfunction2()" class="menucopy2">copy2</button>
  <button onclick="Copytextfunction3()" class="menucopy3">copy3</button>
</div>

Hopefully, this is clear enough, I have made huge progress with the help of this forum, but unfortunately, as I move forward there is more and more I cannot figure out on my own, so whoever will be able to help it would be appreciated.

css html jquery javascript
2 Answers

First of all, inline style should only be reserved as a last resort, use classes instead. Second, avoid duplicating code, use centralized function for common usage.

If I understood you correctly, you need make one page to "communicate" with another page somehow? For that you can either use url parameters or hash #mydata, cookies or localStorage.

Here is an example of using localStorage to store the selected textarea id:

https://jsfiddle.net/veo6thy0/ Every time you refresh the page, it will show last shown textarea

let taId;
try
{
  taId = localStorage.getItem("taId"); //get stored id
}
catch(e){}

if (!document.getElementById(taId))
  taId = document.querySelector(".textniz textarea").id; //fallback to default first textarea

show(taId); //show text area

function show(taId) {
  document.body.setAttribute("show", taId);
  try
  {
    localStorage.setItem("taId", taId); //store textarea id
  }
  catch(e){}
}

function Copytextfunction(taId)
{
  var value = document.getElementById(taId).value;
  var copyText = document.createElement("textarea");
  copyText.value = value;
  copyText.style.position = "fixed";
  copyText.style.top = "-1000vh";
  document.body.append(copyText)
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  console.log(value)
  copyText.remove()
}
textarea[data-ta], /* hide textareas */
.menucopy[data-ta] /* hide copy buttons */
{
  display: none;
}

body[show="myInput1"] [data-ta="myInput1"],
body[show="myInput2"] [data-ta="myInput2"],
body[show="myInput3"] [data-ta="myInput3"]
{
  display: initial;
}
<div class="textniz">
  <textarea class="one" id="myInput1" name="myInput1" data-ta="myInput1" readonly>
One
One
One</textarea>
</div>

<div class="textniz">
  <textarea class="two" id="myInput2" name="myInput2" data-ta="myInput2" readonly>
Two
Two
Two</textarea>
</div>

<div class="textniz">
  <textarea class="three" id="myInput3" name="myInput3" data-ta="myInput3" readonly>
Three
Three
Three</textarea>
</div>


<div class="navbar">
  <div class="container">
    <a class="logo" href=".//templates/chat.html">test</a>
  </div>
</div>

<div>
  <button class="menu">menu</button>

  <button class="image">image</button>

  <button onclick="show(this.dataset.ta)" class="en" data-ta="myInput1">textarea1</button>
  <button onclick="show(this.dataset.ta)" class="gr" data-ta="myInput2">textarea2</button>
  <button onclick="show(this.dataset.ta)" class="ru" data-ta="myInput3">textarea3</button>

  <button onclick="Copytextfunction(this.dataset.ta)" class="menucopy" data-ta="myInput1">copy1</button>
  <button onclick="Copytextfunction(this.dataset.ta)" class="menucopy" data-ta="myInput2">copy2</button>
  <button onclick="Copytextfunction(this.dataset.ta)" class="menucopy" data-ta="myInput3">copy3</button>
</div>

P.S. Just a little clarification in case it's too confusing. This code uses data-* attributes to "link" textareas with it's corresponded buttons. That attribute also used in CSS to hide/display needed textareas and "copy" buttons. The value of that attribute can be accessed in javascript via dataset property of the element, i.e. attribute data-blah="ok" in javascript can be accessed via myElement.dataset.blah

user_29300380

You can use this code and set links like this for textarea 1:
<a href="yourdomain.com/url?textarea=1">This link will show textarea 1 and hide the others.</a>

Please note the changes made to your functions and the html where id is used instead of class.

But let me tell you, what you are trying to achieve is very definitely better done in another way.

// Get textarea from url parameters
const urlParams = new URLSearchParams(window.location.search);
let textarea = urlParams.get('textarea')

function show(textarea) {
  for (let check = 1; check <= 3; check++) {
    document.getElementById('myInput' + check).style.display = "none";
    document.getElementById('menucopy' + check).style.display = "none";
  }
  document.getElementById('myInput' + textarea).style.display = "block";
  document.getElementById('menucopy' + textarea).style.display = "block";
}

function Copytextfunction(textarea) {
  var value = document.getElementById('myInput' + textarea).value;
  var copyText = document.createElement("textarea");
  copyText.value = value;
  copyText.style.position = "fixed";
  copyText.style.top = "-1000vh";
  document.body.append(copyText);
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  console.log(value);
  copyText.remove();
}

// Run the hide function with the textarea number from parameters
if (textarea) {
  show(textarea);
}
<div class="textniz">
  <textarea id="myInput1" name="myInput1" readonly>
      One
      One
      One
    </textarea>
</div>

<div class="textniz">
  <textarea id="myInput2" name="myInput2" readonly>
      Two
      Two
      Two
    </textarea>
</div>

<div class="textniz">
  <textarea id="myInput3" name="myInput3" readonly>
      Three
      Three
      Three
    </textarea>
</div>


<div class="navbar">
  <div class="container">
    <a class="logo" href=".//templates/chat.html">test</a>
  </div>
</div>

<div>
  <button class="menu">menu</button>

  <button class="image">image</button>

  <button onclick="show(1)" id="en">hide1</button>
  <button onclick="show(2)" id="gr">hide2</button>
  <button onclick="show(3)" id="ru">hide3</button>

  <button onclick="Copytextfunction(1)" id="menucopy1">copy1</button>
  <button onclick="Copytextfunction(2)" id="menucopy2">copy2</button>
  <button onclick="Copytextfunction(3)" id="menucopy3">copy3</button>
</div>

user_150513100
Related