javascript 是否可以使用JS的输入类型按钮复制随机文本内容输出(无文本区域)？

我正在尝试使用HTML、CSS和JS制作一个文本加密器页面，这是我的第一个开发挑战

任务

创建<input type="button">，复制<p>的文本输出，该文本输出显示在屏幕上，该屏幕显示了用户在<textarea>中写入的输入文本的加密或解密结果。

主要问题

老实说，我不知道如何做到这一点，我还没有找到任何问题或答复，关于如何使复制输出文本 * 的功能以外的一个<textarea>* 给这个功能的一个 * 输入按钮 * 通过Javascript。
"小问题"
我实际上已经使用了<button> HTML标签，但是删除按钮（页面上显示的红色小按钮）是有效的，但是代价是没有应用它给定的CSS样式。如果知道为什么会发生这种情况的人告诉我为什么，我会很感激。
"我尝试过的事"
我一直在寻找这样做的选择，但我遇到了一些我不知道的事情，比如“async", "navigation" or "exeCommand". The point is I've tried some of these but most of the Internet examples I've found are using the HTML tagand not”，这是我的挑战要求我做的。
"法典"
第一个

只需使用addEventListener侦听click事件，这样当单击按钮时，您就可以检索加密结果的文本内容。
请尝试以下操作：

botonCopiar.addEventListener('click', event => {
  console.log(txtFinale.textContent)
})

所有新的JavaScript代码将是：

var botonEncriptador = document.querySelector(".btnEncrypt");
var botonDesencriptador = document.querySelector(".btnDesCrypt");
var botonCopiar = document.getElementById("copyButton");
var dollNotFound = document.querySelector(".msgMissDoll");
var msgNonExist = document.querySelector(".msgMissH2");
var inTxtEnDes = document.querySelector(".insertTxtEnDes");
var txtFinale = document.querySelector("#encryptResult");
botonEncriptador.onclick = funcionEncriptar;
botonDesencriptador.onclick = funcionDesencriptar;

botonCopiar.addEventListener('click', event => {
  console.log(txtFinale.textContent)
})

function funcionEncriptar() {
  ocultarElementos();
  txtFinale.textContent = encriptarMensaje(recuperarContenido());
  //  Or:
  //  var area = recuperarContenido(); 
  //  txtFinale.textContent = encriptarMensaje(area);
  //P.D.: var "area" here is a local var of "funcionEncriptar", it is not the same one
  //from down there at "recuperarContenido" function.
}

function funcionDesencriptar() {
  ocultarElementos();
  txtFinale.textContent = desencriptarMensaje(recuperarContenido());
}

function borrarTextoArea() {
  document.getElementById("areaInput").value = "";
  //This function applies directly to the HTML button using the <button> tag.
}

function recuperarContenido() {
  var area = document.getElementById("areaInput");
  return area.value;
}

function ocultarElementos() {
  dollNotFound.classList.add("hideElement");
  msgNonExist.classList.add("hideElement");
  inTxtEnDes.classList.add("hideElement");
}

function encriptarMensaje(mensaje) {
  var textoIngresado = mensaje;
  var textoFinale = "";
  for (var i = 0; i < textoIngresado.length; i++) {
    if (textoIngresado[i] == "a") {
      textoFinale = textoFinale + "ai";
    } else if (textoIngresado[i] == "e") {
      textoFinale = textoFinale + "enter";
    } else if (textoIngresado[i] == "i") {
      textoFinale = textoFinale + "imes";
    } else if (textoIngresado[i] == "o") {
      textoFinale = textoFinale + "ober";
    } else if (textoIngresado[i] == "u") {
      textoFinale = textoFinale + "ufat";
    } else {
      textoFinale = textoFinale + textoIngresado[i];
    }
  }
  return textoFinale;
}

function desencriptarMensaje(mensaje) {
  var textoIngresado = mensaje;
  var textoFinale = "";
  for (var i = 0; i < textoIngresado.length; i++) {
    if (textoIngresado[i] == "a") {
      textoFinale = textoFinale + "a";
      i = i + 1;
    } else if (textoIngresado[i] == "e") {
      textoFinale = textoFinale + "e";
      i = i + 4;
    } else if (textoIngresado[i] == "i") {
      textoFinale = textoFinale + "i";
      i = i + 3;
    } else if (textoIngresado[i] == "o") {
      textoFinale = textoFinale + "o";
      i = i + 3;
    } else if (textoIngresado[i] == "u") {
      textoFinale = textoFinale + "u";
      i = i + 3;
    } else {
      textoFinale = textoFinale + textoIngresado[i];
    }
  }
  return textoFinale;
}

javascript 是否可以使用JS的输入类型按钮复制随机文本内容输出(无文本区域)？

1条答案

相关问题

热门标签

最新问答