vanilla js click outside no jquery lib

by ian_smithz

HTML

<div aria-live="polite"><div class="cf_invite_99_1098 cf-invite-wrapper" role="complementary" aria-label="Feedback dialog" style="" id="cf-invite-wrapper">
    <div class="cf-invite">
        <div class="cf-invite__header">
            <div class="cf-invite__title">Tell us what you think</div>
            <div data-invite-close="" class="cf-invite__close" role="button" aria-label="Close feedback dialog" tabindex="0"></div>
        </div>
        <div class="cf-invite__content">Would you like to take our short survey?</div>
        <div class="cf-invite__footer">
            <div data-invite-accept="" class="cf-invite__button cf-invite__button--accept lg-4 md-6 sm-12 cols" role="button" tabindex="0">Yes please</div>
            <div data-invite-decline="" class="cf-invite__button cf-invite__button--decline lg-4 md-6 sm-12 cols" role="button" id="cf-invite__button--decline" tabindex="0">No thanks</div>
        </div>
    </div>
</div></div>

CSS

.cf_invite_99_1098 :focus {
    outline: 1px #42bdd1 dotted;
    outline-offset: 2px;
}

.cf_invite_99_1098 .cf-invite {
    box-sizing: border-box;
    position: fixed;
    z-index: 101;
    display: flex;
    flex-direction: column;
    width: 240px;
    height: 160px;
    border-radius: 3px;
    font-family: 'Helvetica';
    font-size: 16px;
    background: #fff;
    box-shadow: 0 0 16px #ccc;
}

.cf_invite_99_1098 .cf-invite * {
    box-sizing: inherit;
}

.cf_invite_99_1098 .cf-invite--bottom-right {
    bottom: 24px;
    right: 24px;
}

.cf_invite_99_1098 .cf-invite__header {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: space-between;
    padding: 16px;
    line-height: 22px;
}

.cf_invite_99_1098 .cf-invite__title {
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cf_invite_99_1098 .cf-invite__close {
    height: 22px;
    min-width: 22px;
    flex: 0 0 auto;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3e%3cline x1='0' y1='0' x2='14' y2='14' stroke='white' stroke-width='2' /%3e%3cline x1='0' y1='14' x2='14' y2='0' stroke='white' stroke-width='2' /%3e%3c/svg%3e ");
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.cf_invite_99_1098 .cf-invite__content {
    flex: 1 1 auto;
    padding: 0 16px;
    font-size: 12px;
    overflow: hidden;
}

.cf_invite_99_1098 .cf-invite__footer {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row-reverse;
    padding: 16px;
}

.cf_invite_99_1098 .cf-invite__button {
    min-width: 68px;
    height: 28px;
    padding: 0 8px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    line-height: 28px;
    font-size: 14px;
    cursor: pointer;
}

.cf_invite_99_1098 .cf-invite__button--accept {
    background: #4182BD;
}

.cf_invite_99_1098 .cf-invite__button--decline {
...

JavaScript

var specifiedElement = document.getElementById('cf-invite-wrapper');

document.addEventListener('click', function(event) {
  var isClickInside = specifiedElement.contains(event.target);
  var surveyContainerDecline = document.getElementById("cf-invite__button--decline");
  
  if (!isClickInside) {
    surveyContainerDecline.click();
    console.log('outside');
  } 
  
});