Is it possible to simulate array pointers but for div elements in HTML using Javascript

Question

In JavaScript we can create copies of arrays and as we change the contents of that array, the copy's contents also change (as an identical copy of the pointer array).

My question is simply can we achieve this with div elements in html and javascript (or jquery). So for example i have 2 div elements:

<div class="cont1"><p contenteditable="true">Some text...</p></div>

<div class="cont2"><p contenteditable="true">Some text...</p></div>

Both have contenteditable p elements. I want to be able to reflect the changes of cont1 to mirror the changes in cont2, when either p tags are edited.

Javascript is fine, jQuery is preferable.

*If question is not well worded please comment instead of downvoting it, i will immediately make it clearer. Thanks a lot!

Short answer: no, you can't display the same element twice in the DOM (nor display a "reference" of it). You will need to programmatically update the second one — blex, Jun 27 '20 at 23:01

charlietfl · Accepted Answer · 2020-06-27T23:18:00.700

6

You can use the input event and get current html to set in the other element(s)

const $editors = $('p[contenteditable]').on('input', function(){
   $editors.not(this).html( $(this).html() );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cont1"><p contenteditable="true">Some text...</p></div>
<div class="cont2"><p contenteditable="true">Some text...</p></div>

edited Jun 27 '20 at 23:18

answered Jun 27 '20 at 23:06

charlietfl

170,828
13
121
150

This is a good solution, eventhough not exactly what i asked for. Thanks. – Jun 27 '20 at 23:20
1

Well I think what you were asking for is an [XY problem](http://xyproblem.info/) then – charlietfl Jun 27 '20 at 23:22

score 2 · Answer 2 · answered Jun 27 '20 at 23:23

I believe you're confusing "copy" with "reference". When you create an array, the variable you assign it to holds a reference to the actual array object:

var myArray = [1, 2, 3]; // myArray contains a reference to an array object that contains 1, 2, 3

When you assign that variable to another variable, what you are copying is the reference, not the array object:

var otherVar = myArray; // otherVar now contains a reference to the same array object

That is why the following works:

myArray[1] = 7;
if (otherVar[1] === 7) alert('this works!');

Going back to your question about the divs, when you have two div elements in your HTML, those are two different objects. That is why changes to one do not affect the other. The two divs are more like this arrangement of arrays:

var myArray = [1, 2, 3]; // this is an array object
var otherVar = [4, 5, 6]; // this is an entirely separate array object

It requires code to keep two separate objects in sync. A simple jQuery example could look like this:

<input id="in">
<div id="out"></div>

$('#in').keyup(function () {
    $('#out').text($('#in').val());
});

https://jsfiddle.net/0qer3fjw/

iAmOren · Answer 3 · 2020-06-27T23:21:42.197

1

Try:

function change(target,source) {
  if(target && source) {
    document.getElementById(target).innerHTML=document.getElementById(source).innerHTML;
  }
}

You could use innerText instead of innerHTML for straight divs/elements.
The if is to prevent a loop.
HTML:

<div id="div1" contenteditable="true" oninput="change('div2','div1')"></div>
<div id="div2" contenteditable="true" oninput="change('div1','div2')"></div>

edited Jun 27 '20 at 23:21

answered Jun 27 '20 at 23:18

iAmOren

2,760
2
11
23

Since a contenteditable contains html (think `
` for example), using innerText would break it – charlietfl Jun 27 '20 at 23:20
@charlietfl you are correct. I was in the middle of editing. – iAmOren Jun 27 '20 at 23:23

score 1 · Answer 4 · answered Jun 27 '20 at 23:22

Unfortunately you cannot have one element be displayed twice, however, you could use this answer and simply update the second element when the first element gets changed.

$('div1').on('DOMSubtreeModified', 'mydiv', () => {
  $('div2').html($('div1').html())
});

score -1 · Answer 5 · answered Jun 27 '20 at 23:04

-1

I'm sure there's a direct answer, which is probably yes. I would point out that this kind of real time data updating is exactly what libraries like vuejs and reactjs (among others) were written to do. Sorry it's not a real (code) answer, but I suggest you might want to check out some of these libraries, rather than try to reinvent the wheel on something that's complex enough to have whole libraries written about it.

answered Jun 27 '20 at 23:04

Nate G

132
5

Im just learning Vue JS actually, can you let me know how you would achieve this slution with Vue? – Jun 27 '20 at 23:18
Sorry for the delay, I went offline. Basically, bind both elements to the same data store. The *second* code example under the "Declarative Rendering" section of this Getting Started doc gives a basic example: https://vuejs.org/v2/guide/ Refer to the VueJS reference / API docs as you get more complex with this. – Nate G Jun 28 '20 at 13:05

Is it possible to simulate array pointers but for div elements in HTML using Javascript

5 Answers5