Removing lines OnClick

How would I remove these 2 lines via the javascript?

The lines would be removed after as the screen is clicked.

When the iframe is clicked, the lines should be removed.
I’m not sure how I would target the iframe.

.wrapg .lines::before,
.wrapg .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.wrapg .lines::after {
  left: 399px;
}

I almost got it here, but not exactly:
Clicking on the blue lines removes them which isn’t what I want.
I want them to be removed as the screen is clicked.

(function iife() {
  "use strict";

  function hide(el) {
    el.classList.add("hide");
  }

  function hideInitialOverlay(wrapper) {
    hide(wrapper);
  }

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".wrapg .lines");
    hideInitialOverlay(wrapper);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".wrapg .lines");
}());

(function iife() {
  "use strict";
  document.querySelector(".wrapg .lines").addEventListener("click", function() {
    document.querySelector(".wrapg").classList.remove("hide");
  });
}());

image

so instead of binding the listener to “.wrapg .lines”, bind it to “.wrapg” ?

If you wanted to target the iframe specifically, it would be “.wrapg iframe” (You can use tag names in selectors.)

I tried it here, it didn’t work:
I think I would use a different code to do this.

This code isn’t saying target the iframe to remove the lines.

Target this thing, when that’s clicked, remove the other thing.

I would need to set it up differently.


(function iife() {
  "use strict";

  function hide(el) {
    el.classList.add("hide");
  }

  function hideInitialOverlay(wrapper) {
    hide(wrapper);
  }

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".wrapg iframe");
    hideInitialOverlay(wrapper);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".wrapg iframe");
}());

(function iife() {
  "use strict";
  document.querySelector(".wrapg iframe").addEventListener("click", function() {
    document.querySelector(".wrapg .lines").classList.remove("hide");
  });
}());

I was thinking something like this:

When the iframe is clicked the lines should disappear.

Where and how would this class be stated inside the javascript?
.wrapg iframe

I’m not entirely sure how this would be done, or what I have to fix for it to work.

This is the javascript I have so far:


(function iife() {
  "use strict";

  function hide(el) {
    el.classList.add("hide");
  }

  function hideInitialOverlay(wrapper) {
    wrapper.classList.remove("inactive");
    wrapper.classList.add("active");
  }

  function showLines(wrapper) {
    wrapper.classList.remove("active");
  }

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".wrapg");
    wrapper.removeEventListener("click", initialOverlayClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    wrapper.classList.add("inactive");
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".wrapg");
}());

This is the html I have.


.wrapg/*.active*/ .lines::before,
.wrapg/*.active*/ .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.wrapg/*.active*/ .lines::after {
  left: 399px;
}

.wrape.inactive .wrapg .lines {
  display: none;
}

I think I’ll be able to do it this way if I’m able to set it up correctly.

Where and how would this class be stated inside the javascript?
.wrapg iframe

(function iife() {
  "use strict";

  function hide(el) {
    el.classList.add("hide");
  }

  function hideInitialOverlay(wrapper) {
       wrapper.classList.remove("inactive");
    wrapper.classList.add("active");
  }

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".wrapg .lines");
    hideInitialOverlay(wrapper);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    wrapper.addEventListener("click", initialOverlayClickHandler);
    wrapper.classList.add("inactive");
  }
  initButton(".wrapg .lines");
}());

(function iife() {
  "use strict";
  document.querySelector(".wrapg .lines").addEventListener("click", function() {
    document.querySelector(".wrapg").classList.remove("hide");
  });
}());

html

.wrapg/*.active*/ .lines::before,
.wrapg/*.active*/ .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.wrapg/*.active*/ .lines::after {
  left: 399px;
}

.wrapg.inactive .wrapg .lines {
  display: none;
}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.