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!:=):
