.clone().appendTo - Replace element styles not working?

Question

I have individual three arrows. on click; I want the div below them (letsChat) to change styles and I want to clone and append relevant information in that div. I also want it to revert back to it's original state when it is clicked again or if orientation is changed to portrait.

document.querySelector('#compositionArrow').onclick = function(){
  var letsChat = document.querySelector('.lets-chat');
  var letsChatButton = document.querySelector('.lets-chat a');
  var compositionArrow = document.querySelector('#compositionArrow')
  var compositionText = document.querySelector('.composition-text');

    if (letsChatButton.style.display='flex' && window.matchMedia("(orientation: landscape)").matches) {
        
      compositionArrow.style.transform='rotate(180deg)';

      //letsChat.appendChild(compositionText).cloneNode(true);
      //compositionText.clone().appendTo.letsChat; return false;
      document.querySelector('.composition-text').clone().appendTo(document.querySelector('.lets-chat'));
      letsChat.style.background='#00BCD4';
      letsChatButton.style.display='none';
    }
    
    else if (letsChatButton.style.display='none' || window.matchMedia("(orientation: portrait)").matches){ 
      
      compositionArrow.style.transform='rotate(180deg)';

      letsChat.style.background='#ff8f00';
      letsChatButton.style.display='flex';
    }
}

example can be found below: (you may have to play with window

artpenleystudios.com

Answer 1

Here's something that demonstrates part of what you asked. It doesn't take into account orientation change, but it handles the click part. As far as I know, there's no straightforward way to detect orientation change, but here's an article that talks about a few options. Another idea would be to use jQuery Mobile as it fires orientationchange events.

So after much back and forth and after looking at your site more closely, this is what I managed to cobble together.

jQuery('#compositionArrow').click(function() {

  var $letsChat = jQuery('.lets-chat');
  var letsChat = $letsChat[0];
  var letsChatButton = $letsChat.find('a')[0];

  // Remove old composition text if it exists.
  $letsChat.find('.composition-text').remove();

  if (letsChatButton.style.display !== 'none' && window.matchMedia("(orientation: landscape)").matches) {

    this.style.transform = 'rotate(180deg)';

    $letsChat.append(jQuery('.composition-text').clone());
    letsChat.style.background = '#00BCD4';
    letsChatButton.style.display = 'none';
  }

  else if (letsChatButton.style.display === 'none' || window.matchMedia("(orientation: portrait)").matches) {

    this.style.transform = '';

    letsChat.style.background = '#ff8f00';
    letsChatButton.style.display = 'flex';
  }

});

It works for me in FireFox on a downloaded version of your site.

Cheers!