Question

我已经在这个问题上停留了一段时间，我试图将编码后的文本输出传递到另一个文本框中，以便可以再次解码该文本。

我需要将ID为de-code-message的文本区域的值设置为

的输出

function()
            var name = (input + 66) % 26;
            var l= word[c];

          }
        }
        document.getElementById("username").innerHTML = Text.join("");
      }


            Text.push(MsgBox1[idx]);

          } else {

        }
       return;
]

Answer 1

您需要使用.value代替.innerHTML

这是因为当您键入<textarea>表单字段时，您正在更改字段的值，而实际上并没有更改标记之间的HTML。

var text1 = document.querySelector("#one");
var text2 = document.querySelector("#two");
var btnValue = document.querySelector("#copyValue");
var btnHtml = document.querySelector("#copyInnerHtml");

btnValue.addEventListener("click", function(){
  text2.value = text1.value;
});

btnHtml.addEventListener("click", function(){
  text2.innerHTML= text1.innerHTML;
});

body { display: flex;}
#button-container{ margin: 0 10px; align-self: center; flex: 0;}
button{ display: block; padding: 8px 4px;}
textarea { resize: vertical; min-height: 100px; }

<textarea id="one">This has text!, you can change it and it will copy over!</textarea>

<div id="button-container">
  <button type="button" id="copyValue">
    Copy via <code>value</code> &rarr;
  </button>

  <button type="button" id="copyInnerHtml">
    Copy via <code>innerHTML</code> &rarr;
  </button>
</div>

<textarea id="two"></textarea>

注意

可以使用.innerHTML，但仅在第一次使用，因为尚未编辑HTML。编辑字段后，您将更改值，而不是内部的HTML！

Answer 2

演示中评论的详细信息

// Reference the <form>
var ED = document.forms.encDec;
// Callback function enDe() -- passes Event Object
function enDe(event) {
  // Collect all <button> and <textarea> into a NodeList
  var ui = this.elements;
  // Reference the <textarea>s
  var dIN = ui.decIn;
  var eOUT = ui.encOut;
  var eIN = ui.encIn;
  var dOUT = ui.decOut;
  var alpha = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
  // Reference the clicked element
  var clicked = event.target;
  
  /*
  - if the clicked element id is 'enc'...
  - Get the value of Decoded In
  - split() the value into an array
    - map() each character of value
    - return the encoded array
  - join() the encoded array into a string
  - Display the string in Encoded Out
  */
  /*
  - Otherwise if the clicked element id is 'dec'...
  ---Same as above with variations---
  */
  /*
  - Otherwise if the clicked element id is 'trans'...
  - Swap values of Encode Out and Decode Out
  */
  if (clicked.id === 'enc') {
    var decTextIN = dIN.value;
    var eTran = decTextIN.split('').map(function(char) {
      var idx = alpha.indexOf(char);
      return alpha[((idx + 66) % 26)];
    });
    eOUT.value = eTran.join('');

  } else if (clicked.id === 'dec') {
    var encTextIN = eIN.value;
    var dTran = encTextIN.split('').map(function(char) {
      var idx = alpha.indexOf(char);
      return alpha[((idx + 12) % 26)];
    });
    dOUT.value = dTran.join('');

  } else if (clicked.id === 'trans') {
    dIN.value = dOUT.value;
    eIN.value = eOUT.value;
  } else {
    return false;
  }
}

// Register the click event to the <form>
ED.addEventListener('click', enDe);

<form id='encDec'>
  Decoded In: &nbsp;<textarea id="decIn"> </textarea>
  <button id="enc" type='button'> Encode </button>
  <br> Encoded Out:<textarea id="encOut"> </textarea>

  <hr>
  <button id='trans' type='button'>Transfer</button>
  <hr> 

  Encoded In: &nbsp;<textarea id="encIn"> </textarea>
  <button id="dec" type='button'> Decode </button>
  <br> Decoded Out:<textarea id="decOut"> </textarea>
</form>

如何将输出从一个文本区域传递到另一个文本区域

2 个答案:

注意