Having trouble making multiple divs appear with this code

Question

I found JavaScript code for drawing a line connecting two divs here: How to draw a line between two divs?

However, when I try and use this code to draw multiple lines, only the first call to the connect() function seems to work because only one line appears. How can I alter this code to make it so that when I use the connect() function multiple times, more than one line appears?

function getOffset( el ) {
var rect = el.getBoundingClientRect();
return {
    left: rect.left + window.pageXOffset,
    top: rect.top + window.pageYOffset,
    width: rect.width || el.offsetWidth,
    height: rect.height || el.offsetHeight
    };
}

function connect(div1, div2, color, thickness) { 
    var off1 = getOffset(div1);
    var off2 = getOffset(div2);
    // bottom right
    var x1 = off1.left + off1.width;
    var y1 = off1.top + off1.height;
    // top right
    var x2 = off2.left + off2.width;
    var y2 = off2.top;
    // distance
    var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
    // center
    var cx = ((x1 + x2) / 2) - (length / 2);
    var cy = ((y1 + y2) / 2) - (thickness / 2);
    // angle
    var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
    // make hr
    var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";
    body.innerHTML += htmlLine;
}

Include code that calls connect() and creation of params that get passed in. Also, body is undefined. Should be document.body, or it's an object created somewhere. Any errors in your console? — yezzz, Apr 13 '17 at 15:42
Say I have 3 divs, A, B, and C. When I do connect(A,B, 'red', '10') a red line appears connecting A to B. But then when I call connect(A,C,'red','10'), no line appears but the first one remains. — hjskeqwe, Apr 13 '17 at 15:43
what happens if you change the last line inside connect to `document.body.innerHTML += htmlLine;` — yezzz, Apr 13 '17 at 15:49
When I do that it still just draws one line. However, I just noticed that after the first call to connect(), getBoundingClientRect() is returning ClientRect {top: 0, right: 0, bottom: 0, left: 0, width: 0} for some reason. — hjskeqwe, Apr 13 '17 at 15:50
With this browser (chrome) if I do something like `body.innerHTML += "
"` if will flat out give me an error: `Uncaught ReferenceError: body is not defined`. Hence my first message. Now you talk about getBoundingClientRect(). Doesn't mean anything without knowing `el` in `getOffset()`. I'm trying to say you're not providing enough info so others can help you. Read [ask] and [mcve]. — yezzz, Apr 13 '17 at 16:12

score 0 · Answer 1 · answered Apr 14 '17 at 08:06

Fetch the elements again before calling the connect()

window.testIt = function() {
  var div1 = document.getElementById('div1');
  var div2 = document.getElementById('div2');
  connect(div1, div2, "#0F0", 5);
  var div1 = document.getElementById('div1');
  var div3 = document.getElementById('div3');
  connect(div1, div3, "#0F0", 5); }

Having trouble making multiple divs appear with this code

1 Answers1