Javascript onclick event not working?

I was creating wallpaper carousel,by clicking lesser than symbol it must load previous wallpaper.I have used javascript onclick() function ,but its not working.

Here is my html code:

   <div id="slider">
   
	<div class="icon" id="left"><i class="fa fa-angle-left" onclick="prev()"></i></div>
	<h3 id="sliderHeader">First Heading</h3>
	<p id="sliderPara">First paragraph is awesome!</p>
	<div class="icon" id="right"><i class="fa fa-angle-right" onclick="next()"></i></div>
</div>

JAVASCRIPT CODE:

   {
     console.log('prev');
    clearInterval(timer);
  
     cnt--;
     if(cnt == -1)
    cnt= imgadr.length-1;

      var slider= document.getElementById('slider');
      slider.style.backgroundImage= "url(\'"+imgadr[cnt]+"\')";
      document.getElementById('sliderHeader').innerHTML= headArray[cnt];
      document.getElementById('sliderPara').innerHTML= paraArray[cnt];
    
       sliderTimer();
```}

Hi, @pan6831. Welcome to the forums.

While the problem that you are having may indeed be an HTML or CSS problem, the title of your topic suggests that it is a JavaScript issue. With that in mind, I am moving your topic to the JavaScript category where it will more likely receive a faster response.

The JS code posted has lost its formatting. You can save the formatting by preceeding the block of code with three backticks on one line by themselves and then closing the code with three more backticks on a line by themselves, like this:
```
your JS or other block of code here
```

Alternatively, you can also preserve the format of your code by highlighting it and clickiing t he </> icon in the editor’s menu bar. You should be able to edit your post now and see if the formatting techniques work for you.

Please be patient. A JS person will be along shortly.

Try with these changes:
HTML:

<div id="slider">

	<div class="icon" id="left">AAAAAA<i class="fa fa-angle-left" onclick="prev();">AAAAAAA</i></div>
	<h3 id="sliderHeader">First Heading</h3>
	<p id="sliderPara">First paragraph is awesome!</p>
	<div class="icon" id="right"><i class="fa fa-angle-right" onclick="next()"></i></div>
</div>

JS:

 function prev()
{
console.log('prev');
clearInterval(timer);

 var cnt;
 if(cnt == -1)
 cnt= imgadr.length-1;
  
  var slider= document.getElementById('slider');
  slider.style.backgroundImage= "url(\'"+imgadr[cnt]+"\')";
  document.getElementById('sliderHeader').innerHTML= headArray[cnt];
  document.getElementById('sliderPara').innerHTML= paraArray[cnt];

   sliderTimer();
}

If you have any errors in your console pls note to us so it’s more easy to understand what is going on.

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