javascript - 主页文本区域更改

Question

如果论坛中的任何人可以提供帮助，我们将不胜感激。

这是我的一个脚本，通过单击按钮，textarea 会发生变化，但我遇到的问题是页面打开时总是显示 textarea.one 可见，就像我在 CSS 中 display 一样:none 对于 textarea.two 和 textarea. Three。

我的问题是，在此页面之前我是否有另一个包含 3 个链接的页面，并单击

链接 1 - 此脚本打开，textarea.one 可见，textarea.two 和 textarea. Three 隐藏。 链接 2 - 此脚本打开，textarea.two 可见，textarea.one 和 textarea. Three 隐藏。 链接 3 - 此脚本打开，textarea.third 可见，textarea.one 和 textarea.two 隐藏。

与语言选择类似，如果我在页面上选择了语言，它已经知道它应该以可见的 textarea.two 开头，而不是 textarea.one所有类似的页面都将根据首选的“语言”打开。

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>

希望这足够清楚，在这个论坛的帮助下我已经取得了巨大的进步，但不幸的是，随着我的前进，我自己无法弄清楚的东西越来越多，所以无论谁都能够提供帮助将不胜感激。

Answer 1

您可以使用此代码并为文本区域 1 设置如下链接:
<a href="yourdomain.com/url?textarea=1">This link will show textarea 1 and hide the others.</a>

请注意对您的函数和 html 所做的更改，其中 id使用而不是 class .

但是让我告诉你，你想要实现的目标绝对可以通过其他方式更好地实现。

// 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>