Visualizzazione risultati 1 fino 4 di 4

Discussione: Funzione JS non viene eseguita su 2 div uguali

  1. #1
    Guest

    Predefinito Funzione JS non viene eseguita su 2 div uguali

    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!

  2. #2
    mzanella non è connesso AlterGuru
    Data registrazione
    29-12-2015
    Messaggi
    1,954

    Predefinito

    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.

  3. #3
    Guest

    Predefinito

    è 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)
    Ultima modifica di tuttitrucchiInvitaAmici : 21-04-2017 alle ore 12.42.04

  4. #4
    mzanella non è connesso AlterGuru
    Data registrazione
    29-12-2015
    Messaggi
    1,954

    Predefinito

    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.

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •