Funzione JS non viene eseguita su 2 div uguali

20-04-2017, 21.17.12

Buonasera a tutti!
Volevo chiedervi il motivo per cui 2 div HTML contenenti 2 funzioni JS UGUALI non vengono elaborati.
HTML:

Codice HTML:

<body>
<div id="met1">
<script>
function like(){
	document.getElementById('update_root').setAttribute('class', 'btn like btn-danger active');
}
</script>

<script>
function dislike(){
	document.getElementById('update_root2').setAttribute('class', 'btn dislike btn-warning active');
}
</script>
<script>
function cookie(){
	document.cookie = 'metodo1r; expires=Tue, 23 June 2019 22:47:11 UTC';
}
</script>
<div class="container">
  <div id="demo">
    <button class="btn like btn-danger" id="update_root"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> È stato utile <span class="likes"><span id="root"></span></span></button>
    <button class="btn dislike btn-warning"id="update_root2"><span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> Non è stato utile <span class="dislikes"><span id="root2"></span></button>
  </div>
</div>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="js/like-dislike.js"></script> 

<?php 
if (isset($_COOKIE['likegenerale'])) {
	if (isset($_COOKIE['like'])) {
	echo '<script>',
     'like();',
     '</script>'
	;
	}
	if (isset($_COOKIE['dislike'])) {
		echo '<script>',
		'dislike();',
		'</script>'
		;
	}
}
?>
		
		

<script>
	
// Mostra il valore indicato
	function show_root(data) {
		if (data.error == false) {
			var container = $('#root'); // decido dove visalizzare
			container.html(JSON.parse(data.value));
		}
		else {
			alert(data.error);
		}
	}
	



		// Mostra il valore al caricamento dall pagina
		$('#root').ready(function () {
			$.get("controller.php", show_root);
		});


		// Associa il click alla lettura e stampa della variabile
		$('#read_root').click(function () {
			$.get("controller.php", show_root);
		});


		// Associa il click all'incremento e stampa della variabile
		$('#update_root').click(function () {
			$.post("controller.php", { incrementa: "true" }, show_root);
			if (document.cookie.indexOf('metodo1r') == -1 ) {
			document.getElementById('update_root').setAttribute('class', 'btn like btn-danger active');
			cookie();
			}
		});
		
		// Mostra il valore al caricamento dall pagina
		$('#root').ready(function () {
			$.get("controller.php", show_root);
		});
		</script>
		<script>

// Mostra il valore indicato
	function show_root2(data) {
		if (data.error == false) {
			var container = $('#root2'); // decido dove visalizzare
			container.html(JSON.parse(data.value));
		}
		else {
			alert(data.error);
		}
	}
	
		/**********************************************
						NON MI PIACE
		**********************************************/
		
		// Associa il click alla lettura e stampa della variabile
		$('#read_root2').click(function () {
			$.get("controller2.php", show_root2);
		});


		// Associa il click all'incremento e stampa della variabile
		$('#update_root2').click(function () {
			$.post("controller2.php", { incrementa: "true" }, show_root2);
			if (document.cookie.indexOf('metodo1r') == -1 ) {
				document.getElementById('update_root2').setAttribute('class', 'btn dislike btn-warning active');
				cookie();
			}
		});
		// Mostra il valore al caricamento dall pagina
		$('#root2').ready(function () {
			$.get("controller2.php", show_root2);
		});
	</script>
</div>
<div id="Html1">
<script>
function like(){
	document.getElementById('update_root').setAttribute('class', 'btn like btn-danger active');
}
</script>

<script>
function dislike(){
	document.getElementById('update_root2').setAttribute('class', 'btn dislike btn-warning active');
}
</script>
<script>
function cookie(){
	document.cookie = 'metodo1r; expires=Tue, 23 June 2019 22:47:11 UTC';
}
</script>
<div class="container">
  <div id="demo">
    <button class="btn like btn-danger" id="update_root"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> È stato utile <span class="likes"><span id="root"></span></span></button>
    <button class="btn dislike btn-warning"id="update_root2"><span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> Non è stato utile <span class="dislikes"><span id="root2"></span></button>
  </div>
</div>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="js/like-dislike.js"></script> 

<?php 
if (isset($_COOKIE['likegenerale'])) {
	if (isset($_COOKIE['like'])) {
	echo '<script>',
     'like();',
     '</script>'
	;
	}
	if (isset($_COOKIE['dislike'])) {
		echo '<script>',
		'dislike();',
		'</script>'
		;
	}
}
?>
		
		

<script>
	
// Mostra il valore indicato
	function show_root(data) {
		if (data.error == false) {
			var container = $('#root'); // decido dove visalizzare
			container.html(JSON.parse(data.value));
		}
		else {
			alert(data.error);
		}
	}
	



		// Mostra il valore al caricamento dall pagina
		$('#root').ready(function () {
			$.get("controller.php", show_root);
		});


		// Associa il click alla lettura e stampa della variabile
		$('#read_root').click(function () {
			$.get("controller.php", show_root);
		});


		// Associa il click all'incremento e stampa della variabile
		$('#update_root').click(function () {
			$.post("controller.php", { incrementa: "true" }, show_root);
			if (document.cookie.indexOf('metodo1r') == -1 ) {
			document.getElementById('update_root').setAttribute('class', 'btn like btn-danger active');
			cookie();
			}
		});
		
		// Mostra il valore al caricamento dall pagina
		$('#root').ready(function () {
			$.get("controller.php", show_root);
		});
		</script>
		<script>

// Mostra il valore indicato
	function show_root2(data) {
		if (data.error == false) {
			var container = $('#root2'); // decido dove visalizzare
			container.html(JSON.parse(data.value));
		}
		else {
			alert(data.error);
		}
	}
	
		/**********************************************
						NON MI PIACE
		**********************************************/
		
		// Associa il click alla lettura e stampa della variabile
		$('#read_root2').click(function () {
			$.get("controller2.php", show_root2);
		});


		// Associa il click all'incremento e stampa della variabile
		$('#update_root2').click(function () {
			$.post("controller2.php", { incrementa: "true" }, show_root2);
			if (document.cookie.indexOf('metodo1r') == -1 ) {
				document.getElementById('update_root2').setAttribute('class', 'btn dislike btn-warning active');
				cookie();
			}
		});
		// Mostra il valore al caricamento dall pagina
		$('#root2').ready(function () {
			$.get("controller2.php", show_root2);
		});
	</script>
</div>

</body>

CSS:

Codice HTML:

<style>body {
   background-color: #FFFFFF;
   color: #000000;
   font-family: "Malgun Gothic";
   font-size: 13px;
   font-weight: normal;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
@font-face {
   font-family: "Roboto";
   src: url('');
   src: url('?#iefix') format('embedded-opentype'), url('#Roboto') format('svg'), url('RobotoCondensed-Light.ttf') format('truetype'), url('') format('woff');
}
a {
   color: #F5F5F5;
   text-decoration: underline;
}
a:active {
   color: #FF0000;
}
a:hover {
   color: #0000FF;
   text-decoration: underline;
}
#Html1 {
   height: 95px;
   left: 251px;
   position: absolute;
   top: 40px;
   visibility: hidden;
   width: 96px;
   z-index: 1;
}
#met1 {
   height: 95px;
   left: 76px;
   position: absolute;
   top: 82px;
   width: 96px;
   z-index: 0;
}
@media only screen and (max-width: 969px) {
body {
   background-color: #FFFFFF;
   background-image: none;
}
#met1 {
   display: none;
   height: 95px;
   left: 76px;
   top: 82px;
   visibility: hidden;
   width: 96px;
}
#Html1 {
   display: inline;
   height: 120px;
   left: 46px;
   top: 49px;
   visibility: visible;
   width: 237px;
}
}
</style>

Grazie in anticipo!

**mzanella** · 21-04-2017, 11.11.51

I codici sono anche troppo uguali, hai sia dato lo stesso nome a due coppie di funzioni diverse (ci sono due show_root e due show_root2...) che lo gli stessi id ad elementi della pagina distinti. In questo modo la prima coppia di funzioni viene sempre sovrascritta dalla seconda, ed avendo gli id uguali funzioni come getElementById o $('#update_root2') non sanno a quale accedere.

Andrebbe risistemato tutto per bene.

21-04-2017, 12.39.39

è possibile modificare solo i nomi delle funzioni?
perchè entrambi svolgono le stesse operazioni sullo stesso file (uno usato nella visualizzazione desktop, l altro in quella mobile)

**mzanella** · 21-04-2017, 12.44.20

Oltre ai nomi delle funzioni vanno cambiati anche gli id duplicati.
Quelli che ho visto sono root, root2, update_root, update_root2, non ho fatto caso alla presenza di altre duplicazioni.

Discussione: Funzione JS non viene eseguita su 2 div uguali

LinkBack

Strumenti discussione

Display

Funzione JS non viene eseguita su 2 div uguali

Regole di scrittura