Add properties to a child class by using pure JS

Question

I have a carousel and each slide inside is contained in the class "app__slide" as you can see below. Each time in order to show a slide, I add the second class "showing" whose opacity is 1 to the slide.

        <div class="app__slide">
            <div class="app__left-contenu">
                <div class="app__phone-background"></div>
                <div class="app__titre">
                    <p>votre lookbook personnel</p>
                </div>
                <div class="app__text">
                    <p>Stockez par la suite vos photos et videos sur votre lookbook personnel, et partagez aussi vos photos et videos sur les réseaux sociaux. Enregistrez vos favoris.</p>
                </div>
            </div>
            <div class="app__right-contenu">
                <div class="app__phone-background"></div>
                <div class="app__phone-images">
                    <img class="app__blured-image" src="./img/app/large/Iphone 7_01.png" alt="">
                    //- en savoir plus bouton
                    <div id="app__phone-bouton">
                        <div class="bouton-circle"></div>
                        <div class="bouton-inner"></div>
                    </div>
                </div>
            </div>
        </div>

I want make a function in JS that permits me to blur the image in class "app__phone-images" then to show the text in class "app__text"

document.getElementById('app__phone-bouton').addEventListener('click', function() {
if(document.querySelector('.app__blured-image').style.filter = "blur(0px)")
document.querySelector('.app__blured-image').style.filter ="blur(10px)";
else
document.querySelector('.app__blured-image').style.filter = "blur(0px)";

});

My problem is that my function depends on class "showing" and I don't know how to select particularly the slide I want to do it. Can anyone show me how to do it please ?

Before clicking the button

After clicking the button

P/S: I'm not allowed to use jQuery so I will appreciate much the answer in pure JS

the conditional is an eualition not compare ? .filter === "blur(0px)") — Álvaro Touzón, Nov 19 '17 at 18:19
There are multiple problems here. 1. `=` is not for comparison in JavaScript; use `==` or `===`. [Details in this question's answers.](http://stackoverflow.com/questions/38268329/) 2. You can't rely on the value you get back from the `style` object to be in **exactly** the same form it was when you specified it. The way to deal with #2 is to use a class rather than rely on checking `.style.filter`. (This isn't an answer because I can't make out the details of what you're really trying to do.) Also note that if you have more than one match, you'll need `querySelectorAll` and a loop. — T.J. Crowder, Nov 19 '17 at 18:26

Intervalia · Accepted Answer · 2017-11-20T22:38:20.910

I'm not sure if this is what you need but this might help:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Blur Test 1</title>
    <style>
    body {
      background-color: black;
      padding-top: 100px;
      text-align: center;
    }

    .app__slide {
      margin: 0 auto;
      position: relative;
      text-align: center;
      width: 500px;
    }

    #app__phone-bouton {
      background-color: #00F;
      border-radius: 50%;
      cursor: pointer;
      height: 24px;
      margin: 40px auto 5px;
      position: relative;
      width: 24px;
    }

    #app__phone-bouton:before {
      border-radius: 50%;
      border: 1px solid rgba(0,0,255,.75);
      content: '';
      height: 40px;
      left: -9px;
      position: absolute;
      top: -9px;
      width: 40px;
    }

    #app__phone-bouton > div {
      display: none;
    }

    .app__titre {
      font-size: 18px;
      font-weight: bold;
    }

    .app__left-contenu {
      display: none;
    }

    .app__slide__show-text .app__left-contenu {
      background-color: rgba(64,64,64,.75);
      border-radius: 10px;
      color: #FFF;
      display: block;
      left: 50%;
      min-height: 300px;
      min-width: 400px;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
    }

    .app__slide__show-text .app__blured-image {
      filter: blur(10px);
    }
    </style>
  </head>
  <body>
    <div class="app__slide">
      <div class="app__left-contenu">
        <div class="app__phone-background"></div>
        <div class="app__titre">
          <p>votre lookbook personnel</p>
        </div>
        <div class="app__text">
          <p>Stockez par la suite vos photos et videos sur votre lookbook personnel, et partagez aussi vos photos et videos sur les réseaux sociaux. Enregistrez vos favoris.</p>
        </div>
      </div>
      <div class="app__right-contenu">
        <div class="app__phone-background"></div>
        <div class="app__phone-images">
          <img class="app__blured-image" src="iphone.png" alt="">
          <div id="app__phone-bouton"></div>
        </div>
      </div>
    </div>
    <script>
    document.getElementById('app__phone-bouton').addEventListener('click', function() {
      document.querySelector('.app__slide').classList.toggle('app__slide__show-text');
    });

    </script>
  </body>
</html>

The trick here is to use the CSS to to trigger the showing and hiding of the text as well as the blurring of the image.

document.querySelector('.app__slide').classList.toggle('app__slide__show-text');

The classname app__slide__show-text is used to tell text to show and the image to blur.

It is usually better to set a class name instead of styles.

If this isn't what you are looking for, let me know.

UPDATE

Try something like this code:

document.querySelectorAll('.app__slide').forEach(
  func‌tion(slide) {
    var bouton = slide.querySelector('.app__phone-bouton');
    bouton.addEventListener('click', 
      function() { 
        slide.querySelector('.app__blured-image').classList.toggl‌e('app__blured-image‌-on');
        slide.querySelector('.app__text').classList.toggle('app__‌text-mobile-on');
        slide.querySelector('.app__phone-background').classList.t‌oggle('app__phone-ba‌ckground-on');
      }
    );
  }
);

This will allow each slide to control its children.

Thank you, it helped but not so much. It just works in the first slide of my carousel, I'm working on the foreach for other slides too but something is not right in my JS - document.querySelectorAll('.app__phone-bouton').forEach(function() { element.addEventListener('click', function() { document.querySelector('.app__blured-image').classList.toggle('app__blured-image-on'); document.querySelector('.app__text').classList.toggle('app__text-mobile-on'); document.querySelector('.app__phone-background').classList.toggle('app__phone-background-on'); }); }); — Quang Tuyen DINH, Nov 20 '17 at 16:55
Do you have a `
` for each slide in the carousel? If so then see my update in the answer above. I am writing a little blind since I don't have all your code. But I think something like what I provided should help. Bon chance. — Intervalia, Nov 20 '17 at 22:35
Hi, I understand your code JS, it seems logic but the browser say in the console "Cannot read property 'addEventListener' of null" and I don't know why. Here are the codes I'm working on for a better view: [app-code](https://codepen.io/DX_/pen/eeMzgg) — Quang Tuyen DINH, Nov 21 '17 at 13:52
in your last `.app__slide` you don't have an `id` and you accidentally typed `
` instead of `
` — Intervalia, Nov 21 '17 at 14:25
The last slide is different from others, [this](https://i.imgur.com/lvSE9YQ.png) should be the last one. And the others should be like this [before](https://i.imgur.com/avHIA1v.png) and [after](https://i.imgur.com/F3S1rUK.png) — Quang Tuyen DINH, Nov 21 '17 at 14:29
For the example code to work each of the `
` tags must have the same class `app__phone-bouton`. — Intervalia, Nov 21 '17 at 15:15

Add properties to a child class by using pure JS

1 Answers1

UPDATE