Making 2 Text areas reflect each other-CodePudding

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/[email protected]/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 >


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


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


</div>



<div >
<input type="checkbox" id="myCheckbox" onchange="rotateElem()" checked><i ></i></button>
<div >
<a href="#" >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 ></div>


<div >
  <div >
    <h1><span >Study</span><span >App</span></h1>
</div>




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

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

CodePudding user response：

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