Making 2+ Text areas reflect each other

December 10, 2021

I am making a note-taking app and I want 2 text areas to when you type in one the other changes to
what you are doing in one. I want so when I change the title of the page it will change in other places on the page. I’ll provide my current code what my page looks like (I want the change to be with my Unititled and an area next to the dropdown arrow) and what I want it to do, I’ve tried change and input events and I can’t seem to figure it out.[My Current Site][1]

What I Want – https://share.vidyard.com/watch/Wj6uTmEiB9LR8iiZy7sVf9
[1]: https://i.stack.imgur.com/3vzEB.png

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Study App</title>
<link rel="stylesheet" href="study.css" />
<link href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/5.15.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf- 
8"></script>
</head>
<body>

<script src="study.js"></script>


<div class="dropdown">


  <nav><label for="touch"><span>Settings</span></label>
    <input type="checkbox" id="touch"/>


    <ul class="slide">
      <li><a><div class="dark"><button onclick="myFunction()">
      <input class="toggle" type="checkbox" /></button></div></a></li>
      <li><a href="#"></a></li>
    </ul>
  </nav>
  </div>


</div>



<div class="arrowdown">
<input type="checkbox" id="myCheckbox" onchange="rotateElem()" checked><i class="fas fa-angle- 
right dropdown"></i></button>
<div class="pages">
<a href="#" class="sub-item">Add Page</a></div>
</div>
</div>

<script type="text/javascript">

var checkBox = document.getElementById("myCheckbox");

function rotateElem() {
if (checkBox.checked == false)
{
  document.querySelector('.fas.fa-angle-right.dropdown').style.transform = 'rotate(90deg)';
}
else {
document.querySelector('.fas.fa-angle-right.dropdown').style.transform= 'rotate(0deg)';
}   
}
</script>

  
<div class="tabs"></div>


<div class="sidebar">
  <div class="sidebar-top">
    <h1><span class="study">Study</span><span class="app">App</span></h1>
</div>




<div class="title">
<textarea id="shortInput" spellcheck="true" placeholder="Untitled" cols="30" rows="1"> 
</textarea>
</div>

<div class="textbox">
  <textarea id="longInput" spellcheck="true" placeholder="Start typing..." cols="30" 
rows="10"></textarea>
</div>


<script type="text/javascript">
  $('.pages').hide();
  $(document).ready(function(){
    $('input').click(function(){
      $('.pages').slideToggle();
    });
  });
  </script>

 <script src="study.js"></script>


 </body>
 </html>

>Solution :

One possible approach would be to store the synchronised value in a variable, and add event listeners to each element for any changes. Then update the value of each element with the new value when the change occurs.

// Store the synchronised content
let value = ''

// Add change listeners to each element
const elements = document.querySelectorAll('.synced')
for (let i = 0; i < elements.length; i++) {
  // Different browsers will work better with different events
  // but there's no problem with listening for multiple
  elements[i].addEventListener('change', handleChange)
  elements[i].addEventListener('input', handleChange)
  elements[i].addEventListener('keyup', handleChange)
}

// When a change occurs, set the value of all the synchronised elements
function handleChange(e) {
  value = e.target.value
  for (let i = 0; i < elements.length; i++) {
    elements[i].value = value
  }
}

<textarea class="synced"></textarea>
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>

jQuery version:

// Store the synchronised content
let value = ''

// Get all the of the relevant elements
const elements = $('.synced')

// Different browsers will work better with different events
// but there's no problem with listening for multiple
elements.on('change input keyup', function() {
  value = $(this).val()
  elements.val(value)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>