id'yi birer birer arttırma&eksiltme

Merhaba Arkadaşlar, yazılımın oldukça acemisiyim. Veri tabanından verileri alıyorum, fakat ben butona tıklayınca id'yi bir arttırmasını ve eksiltmesini istiyorum (ileri geri tuşu ile) fakat bunu bir türlü başaramamadım. yardımcı olursanız sevinirim. aşağıdaki kodlar olmuyorsa daha fazla yardım edin lütfen. teşekkür ederim.

Kod 
Yığını:<?php

include_once ("db_connect.php");
$db = new Db();
if (!$db->connect()) {
    die("Hata: Veritabanına bağlanırken bir hata oluştu." . $db->error());
}
$sayi = 1;
$kelimeDb = $db->select("SELECT * FROM biron where id=$sayi");
$kelimeDbAnlam=str_replace('(III)','.',str_replace('(II)','.',str_replace('(I)','',$kelimeDb[0]['sayi'])));
$kelimeDbAnlam_Kelime=str_replace('(III)','.',str_replace('(II)','.',str_replace('(I)','',$kelimeDb[0]['oku'])));

?>

<!doctype html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="referrer" content="no-referrer">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery.js"></script>
<title>Harun</title>
</head>
<body>
<div class="container">
      <div class="soru">
      <a href="" onclick="SayiEksilt() ; SayiTextPlay(); return false;" class="buttons2" style="min-width:0px; padding: 10px 10px 6px 10px; margin-right:20px;"><img src="img/next.png" style="max-height:50px; transform: rotate(180deg);" /></a>
      <span id="sayiBox" class="buttons2" style="padding:10px; height:auto; line-height:normal; font-size:2em; text-align: center; margin-right:20px;"><?php echo $kelimeDbAnlam;?></span>
      <a href="" onclick="SayiArttir(); SayiTextPlay(); return false; $sayi=1; $sayi++; " class="buttons2" style="min-width:0px; padding: 10px 10px 6px 10px;"><img src="img/next.png" style="max-height:50px;" /></a>
      </br>
        <span id="sayiBox" class="buttons2" style="padding:10px; height:auto; line-height:normal; font-size:2em; text-align: center; margin-right:20px;"><?php echo $kelimeDbAnlam;?></span>
      <a href="" onclick="SayiTextPlay(); return false;" class="buttons2" style="min-width:0px; padding: 10px 10px 6px 10px; margin-top:20px;"><img src="img/sound.png" style="max-height:50px;" /></a>
      </div>
      <div style="clear:both;"></div>

   <div class="buttons-container" style="margin-top:15px;">
      <audio id="SayiTextSound">
        <source id="SayiTextSoundSource" src="https://translate.google.com/translate_tts?ie=UTF-8&tl=tr-TR&client=tw-ob&q=<?php echo $kelimeDbAnlam; ?>">
         Your browser does not support the audio element.
      </audio>
      <audio id="correct">
        <source src="sound/correct.wav" type="audio/wav">
         Your browser does not support the audio element.
      </audio>
      <audio id="wrong">
        <source src="sound/wrong.wav" type="audio/wav">
         Your browser does not support the audio element.
      </audio>
   </div>
   </div>
<script>
function SayiTextPlay(){
   var SayiTextSound = document.getElementById("SayiTextSound");
   SayiTextSound.currentTime = 0;
   SayiTextSound.play();
}

function SayiArttir(){
    var sayi = parseInt($('#sayiBox').text());
   var audio = $("#SayiTextSound");
    sayi++;
   $('#sayiBox').text(sayi);
   $('#SayiTextSoundSource').attr('src','https://translate.google.com/translate_tts?ie=UTF-8&tl=tr-TR&client=tw-ob&q='+sayi);
   audio[0].pause();
    audio[0].load();

}

function SayiEksilt(){
   var sayi = parseInt($('#sayiBox').text());
   var audio = $("#SayiTextSound");
   if(sayi>0){
   sayi--;
   }
   $('#sayiBox').text(sayi);
   $('#SayiTextSoundSource').attr('src','https://translate.google.com/translate_tts?ie=UTF-8&tl=tr-TR&client=tw-ob&q='+sayi);
   audio[0].pause();
    audio[0].load();
}

</script>
</body>
</html>

id'yi birer birer arttırma&eksiltme

Kod

Benzer içerikler