Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Select a second div and select an element inside of it

I want to be able to select a second div (bpa-front-module–pm-body__item) inside a nested div of (bpa-front–pm-body-items), and then select the svg of the second div and hide the svg.

If I add .style.display=’none’; after the [1] it hides the entire div, so the first line of JavaScript works fine.

For the second line of code In the console I get the error "Uncaught TypeError: Cannot set properties of undefined (setting ‘display’)"

I would then like to add my own image, by url, in replacement of the svg, possibly by doing content before the text (the ‘p’ tag after it)?

setTimeout( function()
  {
  var seconddiv = document.querySelectorAll(".bpa-front-module--pm-body__item")[1];
  var changediv = seconddiv.getElementsByClassName(".bpa-front-pm-pay-local-icon").style.display='none';
  }
  , 5000 );
svg { width: 48px; }
<div class="bpa-front--pm-body-items">
  <div class="bpa-front-module--pm-body__item __bpa-is-selected">
    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" class="bpa-front-pm-pay-local-icon">
      <g>
        <g>
          <rect fill="none" height="24" width="24"></rect>
          <rect fill="none" height="24" width="24"></rect>
        </g>
      </g>
      <g>
        <path d="M21.9,7.89l-1.05-3.37c-0.22-0.9-1-1.52-1.91-1.52H5.05c-0.9,0-1.69,0.63-1.9,1.52L2.1,7.89C1.64,9.86,2.95,11,3,11.06
              V19 c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-7.94C22.12,9.94,22.09,8.65,21.9,7.89z M13,5h1.96l0.54,3.52C15.59,9.23,15.11,10,14.22,10 
              C13.55,10,13,9.41,13,8.69V5z M6.44,8.86C6.36,9.51,5.84,10,5.23,10C4.3,10,3.88,9.03,4.04,8.36L5.05,5h1.97L6.44,8.86z 
              M11,8.69 C11,9.41,10.45,10,9.71,10c-0.75,0-1.3-0.7-1.22-1.48L9.04,5H11V8.69z M18.77,10c-0.61,0-1.14-0.49-1.21-1.14
              L16.98,5l1.93-0.01 l1.05,3.37C20.12,9.03,19.71,10,18.77,10z">
        </path>
      </g>
    </svg>
    <p>Pay on the Day</p>
    <div class="bpa-front-si-card--checkmark-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M0 0h24v24H0V0z" fill="none"></path>
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29 5.7 12.7
              c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88
              c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z">
        </path>
      </svg>
    </div>
  </div>
  <div class="bpa-front-module--pm-body__item">
    <!-- SELECT THIS DIV -->
    <!-- SELECT & HIDE SVG  and replace with an image URL? -->
    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" class="bpa-front-pm-pay-local-icon">
      <g>
        <g>
          <rect fill="none" height="24" width="24"></rect>
          <rect fill="none" height="24" width="24"></rect>
        </g>
      </g>
      <g>
        <path d="M21.9,7.89l-1.05-3.37c-0.22-0.9-1-1.52-1.91-1.52H5.05c-0.9,0-1.69,0.63-1.9,1.52L2.1,7.89C1.64,9.86,2.95,11,3,11.06
                 V19 c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-7.94C22.12,9.94,22.09,8.65,21.9,7.89z M13,5h1.96l0.54,3.52
                 C15.59,9.23,15.11,10,14.22,10 C13.55,10,13,9.41,13,8.69V5z M6.44,8.86C6.36,9.51,5.84,10,5.23,10
                 C4.3,10,3.88,9.03,4.04,8.36L5.05,5h1.97L6.44,8.86z M11,8.69 C11,9.41,10.45,10,9.71,10c-0.75,0-1.3-0.7-1.22-1.48
                 L9.04,5H11V8.69z M18.77,10c-0.61,0-1.14-0.49-1.21-1.14L16.98,5l1.93-0.01 l1.05,3.37C20.12,9.03,19.71,10,18.77,10z">
        </path>
      </g>
    </svg>
    <p>Debit/Credit</p>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Your line :

        var changediv = seconddiv.getElementsByClassName(".bpa-front-pm-pay-local-icon").style.display='none';

    has an error, you can remove the ‘.’ before bpa-front-pm-pay-local-icon because getElementsByClassName already target classes, so you can remove the dot class selector. Then you have to select an element from the list, like this : seconddiv.getElementsByClassName(".bpa-front-pm-pay-local-icon")[0].style.display

    Login or Signup to reply.
  2. 0

    Simply use .bpa-front-module--pm-body__item:nth-child(2) .bpa-front-pm-pay-local-icon…

    setTimeout( function()
  {
  document.querySelector('.bpa-front-module--pm-body__item:nth-child(2) .bpa-front-pm-pay-local-icon').style.display='none';
  }
  , 5000 )
    svg { width: 48px; }


.bpa-front-module--pm-body__item:nth-child(2) .bpa-front-pm-pay-local-icon
  {
  background : orange;
  }
    <div class="bpa-front--pm-body-items">
  <div class="bpa-front-module--pm-body__item __bpa-is-selected">
    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" class="bpa-front-pm-pay-local-icon">
      <g>
        <g>
          <rect fill="none" height="24" width="24"></rect>
          <rect fill="none" height="24" width="24"></rect>
        </g>
      </g>
      <g>
        <path d="M21.9,7.89l-1.05-3.37c-0.22-0.9-1-1.52-1.91-1.52H5.05c-0.9,0-1.69,0.63-1.9,1.52L2.1,7.89C1.64,9.86,2.95,11,3,11.06
              V19 c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-7.94C22.12,9.94,22.09,8.65,21.9,7.89z M13,5h1.96l0.54,3.52C15.59,9.23,15.11,10,14.22,10 
              C13.55,10,13,9.41,13,8.69V5z M6.44,8.86C6.36,9.51,5.84,10,5.23,10C4.3,10,3.88,9.03,4.04,8.36L5.05,5h1.97L6.44,8.86z 
              M11,8.69 C11,9.41,10.45,10,9.71,10c-0.75,0-1.3-0.7-1.22-1.48L9.04,5H11V8.69z M18.77,10c-0.61,0-1.14-0.49-1.21-1.14
              L16.98,5l1.93-0.01 l1.05,3.37C20.12,9.03,19.71,10,18.77,10z">
        </path>
      </g>
    </svg>
    <p>Pay on the Day</p>
    <div class="bpa-front-si-card--checkmark-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M0 0h24v24H0V0z" fill="none"></path>
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29 5.7 12.7
              c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88
              c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z">
        </path>
      </svg>
    </div>
  </div>
  <div class="bpa-front-module--pm-body__item">
    <!-- SELECT THIS DIV -->
    <!-- SELECT & HIDE SVG  and replace with an image URL? -->
    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" class="bpa-front-pm-pay-local-icon">
      <g>
        <g>
          <rect fill="none" height="24" width="24"></rect>
          <rect fill="none" height="24" width="24"></rect>
        </g>
      </g>
      <g>
        <path d="M21.9,7.89l-1.05-3.37c-0.22-0.9-1-1.52-1.91-1.52H5.05c-0.9,0-1.69,0.63-1.9,1.52L2.1,7.89C1.64,9.86,2.95,11,3,11.06
                 V19 c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-7.94C22.12,9.94,22.09,8.65,21.9,7.89z M13,5h1.96l0.54,3.52
                 C15.59,9.23,15.11,10,14.22,10 C13.55,10,13,9.41,13,8.69V5z M6.44,8.86C6.36,9.51,5.84,10,5.23,10
                 C4.3,10,3.88,9.03,4.04,8.36L5.05,5h1.97L6.44,8.86z M11,8.69 C11,9.41,10.45,10,9.71,10c-0.75,0-1.3-0.7-1.22-1.48
                 L9.04,5H11V8.69z M18.77,10c-0.61,0-1.14-0.49-1.21-1.14L16.98,5l1.93-0.01 l1.05,3.37C20.12,9.03,19.71,10,18.77,10z">
        </path>
      </g>
    </svg>
    <p>Debit/Credit</p>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search