Question 173319 in Html Question posted in
Some basic documentation can be found here.

JS function working in console but not onClick event in HTML

I wondering what’s wrong with my code but can’t figure out what’s going on.

here is the JS

const slider = document.querySelector('.slider');
let newTranslate = 0

const next = () => {
    newTranslate -= 100
    slider.style.transform = `translateX(${newTranslate}%)`
};

const prev = () => {
    newTranslate += 100
    slider.style.transform = `translateX(${newTranslate}%)`
};

and my HTML

 <section class="quote">
        <a onclick="prev()">
            <i class="arrow arrow-left"></i>
        </a>
        <div class="slider-container slider-1">
            <div class="slider">
                <div class="slide slide-1">
                    <div class="quote_container">
                      ...
                    </div>
                </div>
            </div>
        </div>
    <a onclick="next()">
          <i class="arrow arrow-right"></i>
     </a>
 </section>

What is strange is that next() is working good but prev only working once after the page is loaded. When i click next() and then prev(), prev() is not working.

When i run the function in the console it’s working perfectly.

It seems there is no async element so i dont understand at all.

Someone could help ?

Thanks a lot

Tags:

3

Answers


  1. 0

    It might width parent tag is not enough to move the icon. Also with the slider element, I think u using the id for that element if right u missing the ‘#’ prefix. It should be:

    const slider = document.querySelector("#slider");
    Login or Signup to reply.
  2. 0 
    const prev = () => {
    newTranslate += 100
    slider.style.transform = `translateX(${newTranslate}%)`
};

// Update the prev() function to check for the minimum value of newTranslate
const prev = () => {
    if (newTranslate <= 0) {
        newTranslate += 100
        slider.style.transform = `translateX(${newTranslate}%)`
    }
};
    Login or Signup to reply.
  3. 0

    Its because your slider element is above the left arrow (prev()) in the stack, so when it shifts left it sits on top and thus blocks your click. Just set the links to be position:relative with a z-index:1 (or higher than the slider) and it should work

    const slider = document.querySelector('.slider');
let newTranslate = 0

const next = () => {
  newTranslate -= 100
  slider.style.transform = `translateX(${newTranslate}%)`
};

const prev = () => {
  newTranslate += 100
  slider.style.transform = `translateX(${newTranslate}%)`
};
    .slider-container {
  background: #ccc;
  display: inline-block;
  width: 100px;
}

.quote a {
  color: red;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
    <section class="quote">
  <a onclick="prev()">
    <i class="arrow arrow-left">left</i>
  </a>
  <div class="slider-container slider-1">
    <div class="slider">
      <div class="slide slide-1">
        <div class="quote_container">
          ...
        </div>
      </div>
    </div>
  </div>
  <a onclick="next()">
    <i class="arrow arrow-right">right</i>
  </a>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search