problems with html, javascript, php and MySQL

Question

I have in my database 2 rows of information so my code create will create positivoNegativo.png twice and the number 10 twice. When I click on the FIRST positivoNegativo.png my number FIRST 10 is incremented (exacly as I wanted to). Now my issue, when I click on the SECOND positivoNegativo.png, the FIRST number is incremented again! I just can't increment the SECOND number by clicking on the SECOND positivoNegativo.png

<html>  
<body>

    <?php
    include_once("./classe/conexao.php");
    $busca = $pdo->prepare("select * from anuncios");
    $busca->execute();
    $linha = $busca->fetchAll(PDO::FETCH_OBJ);
    $classe = 0;
    foreach ($linha as $lista) {
        echo "<p class='demo'>10</p>";
        echo "<img src='imagens/positivoNegativo.png'usemap='#mapa'>";
        echo "<map name='mapa'>";
        echo "<area shape='rect' coords='1,1,73,59' onclick='aumenta($classe)'>";
        echo "</map>";
        echo "<span>$lista->titulo</span>";
        $classe++;
    }
    ?>
    <script>
        function aumenta(classe) {
            var numero = document.getElementsByClassName('demo')[classe].innerHTML;
            numero++;
            document.getElementsByClassName('demo')[classe].innerHTML = numero;
        }
    </script>;
</body>

Have you checked generated html? What is there in onclick attribute? — u_mulder
– u_mulder, Commented Jun 17, 2016 at 7:33
This is because you have not assigned $classe to the <p> containing the number in any way. — KIKO Software
– KIKO Software, Commented Jun 17, 2016 at 7:39

Atif · Accepted Answer · 2016-06-17 07:50:14Z

1

You need to use different map for each image.

foreach ($linha as $lista) {
    echo "<p class='demo'>10</p>";
    echo "<img src='imagens/positivoNegativo.png'usemap='#mapa$classe'>";
    echo "<map name='mapa$classe'>";
    echo "<area shape='rect' coords='1,1,73,59' onclick='aumenta($classe)'>";
    echo "</map>";
    echo "<span>$lista->titulo</span>";
    $classe++;
}

answered Jun 17, 2016 at 7:50

Atif

755 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KIKO Software · Accepted Answer · 2016-06-17 07:44:27Z

Try this:

<?php
include_once("./classe/conexao.php");
$busca = $pdo->prepare("select * from anuncios");
$busca->execute();
$linha = $busca->fetchAll(PDO::FETCH_OBJ);
$classe = 0;
foreach ($linha as $lista) {
    echo "<p class='demo".$classe."'>10</p>";
    echo "<img src='imagens/positivoNegativo.png' onclick='aumenta($classe)'>";
    echo "<span>$lista->titulo</span>";
    $classe++;
}
?>
<script>
    function aumenta(classe) {
        var numero = document.getElementsByClassName('demo'+classe).innerHTML;
        numero++;
        document.getElementsByClassName('demo'+classe).innerHTML = numero;
    }
</script>;

I didn't test the code, but it might give you some hints.

I left out the whole <map> thing because it doesn't make sense in your code. There's only an up?

Collectives™ on Stack Overflow

problems with html, javascript, php and MySQL

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related