Why does not the function run on the first click in this case?

Question

Why does not the function run on the first click in this case?

Navigation

#1 by (1 votes)

1

What I try to do is that the last image is put at the beginning when you click on the button, but the button only works from the second click, what is my error?

function click()
		{
			var button=document.getElementsByTagName("button");
			button[0].addEventListener("click",pasarimg,false);
		}
    
function pasarimg()
	    {

		    var padre=document.getElementById("padre");
	        var ultimo=padre.lastChild;
		    var primero=padre.firstChild;
		    padre.insertBefore(ultimo,primero)
		}
	
		window.onload=click

#padre
{
	position: relative;
	right: 0;
	margin: auto;
	width: 100%;
	white-space: nowrap;
		
}
	.img
{
	position: relative;
	width: 16.166%;
	display: inline-block;
	vertical-align:middle;
	text-align: center;
	padding: 12% 0;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}
button
{
	width: 50px;
	height: 50px;
}

<div id="padre">		
					
	<div class="img" style="background-image: url(http://img.fenixzone.net/i/rBbHXpy.jpeg)"></div>
		
	<div class="img" style="background-image: url(http://img.fenixzone.net/i/rBbHXpy.jpeg)"></div>
		
	<div class="img" style="background-image: url(http://img.fenixzone.net/i/rBbHXpy.jpeg)"></div>
		
	<div class="img" style="background-image: url(http://i.imgur.com/xV5iygm.png"></div>
					
					
				
     </div>
	
	<button >click</button>

javascript html5

asked by Orlando Pasaca Rojas 04.03.2018 в 21:42

source

1 answer

Trigger SQL Server insert record if certain field is updated Check Sqlite column and modify the data

score 1 · Answer 1

I already solved it by putting firstElementChild and lastElementChild instead of lastChild and firstChild, although I still do not know what the difference is

function click()
	 {
			  var button=document.getElementsByTagName("button");
			  button[0].addEventListener("click",pasarimg,false);
	 }
function pasarimg()
	 {

		    var padre=document.getElementById("padre");
	      var ultimo=padre.lastElementChild;
				var primero=padre.firstElementChild;
				padre.insertBefore(ultimo,primero)
		    padre.insertBefore(ultimo,primero);
		
	 }
   			window.onload=click

	#padre
{
	position: relative;
	right: 0;
	margin: auto;
	width: 100%;
	white-space: nowrap;
		
}
		.img
{
	position: relative;
	width: 16.166%;
	display: inline-block;
		vertical-align:middle;
	margin-right: 0.5%;
	
	text-align: center;
	    padding: 12% 0;
 background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
	z-index: 0;
}
button
		{
			width: 50px;
			height: 50px;
		}

<div id="padre">		
					
					<div class="img" style="background-image: url(http://img.fenixzone.net/i/rBbHXpy.jpeg)"></div>
		
		            <div class="img" style="background-image: url(http://img.fenixzone.net/i/rBbHXpy.jpeg)"></div>
		
	                <div class="img" style="background-image: url(http://img.fenixzone.net/i/rBbHXpy.jpeg)"></div>
		
	                <div class="img" style="background-image: url(http://i.imgur.com/xV5iygm.png"></div>
					
					
				
     </div>
	
	<button>click</button>