Does this meet your requirements?
function showPopup() {
document.getElementById('2').style.display = "block";
}
function syncValueWith2() {
document.getElementById('2').value = document.getElementById('1').value;
}
function syncValueWith1() {
document.getElementById('1').value = document.getElementById('2').value;
}<textarea onkeyup="syncValueWith2()" id="1"></textarea>
<br>
<textarea onkeyup="syncValueWith1()" id="2" style="display: none;"></textarea>
<input type="button" value="Show Popup" onclick="showPopup()">@Keshav solution will update everytime you finish editing the text area
If you want to update it directly when you press the key, you can use jQuery and with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<textarea class="textarea-1" rows="4" cols="50">
test
</textarea>
<textarea class="textarea-2" rows="4" cols="50">
test
</textarea>
</body>
<script type="text/javascript">
var textarea1 = $('.textarea-1');
var textarea2 = $('.textarea-2');
textarea1.keyup(function() {
textarea2.val(textarea1.val());
});
textarea2.keyup(function() {
textarea1.val(textarea2.val());
});
</script>
</html>
Is this what you want?
var textarea1 = document.getElementById("textarea1");
var textarea2 = document.getElementById("textarea2");
var button = document.getElementById("button");
function Show(button) {
if (button.innerHTML = "Show") {
button.innerHTML = "Hide" ;
textarea2.style.display = "inline";
} else {
button.innerHTML = "Show" ;
textarea2.style.display = "none";
}
}
function change1() {
textarea2.value = textarea1.value;
}
function change2() {
textarea1.value = textarea2.value;
}<textarea id="textarea1" onkeyup="change1();"></textarea>
<textarea id="textarea2" onkeyup="change2();" style="display:none"></textarea> <br />
<button onclick="Show(this)">Show</button>