HTML KODU :
<a href="#" id="next-btn">İleri</a>
<div id="soru1">
<p>Bu birinci sorudur.</p>
</div>
<div id="soru2">
<p>Bu ikinci sorudur.</p>
</div>
<div id="soru3">
<p>Bu üçüncü sorudur.</p>
</div>JAVASCRİPT KODU:
var currentId = 1; // Mevcut soru id'si
// İleri butonuna tıklama olayı
document.getElementById("next-btn").addEventListener("click", function() {
currentId++; // Bir sonraki sorunun id'si
// Yeni sayfa adresi oluşturma
var newUrl = window.location.href.split('?')[0] + "?soru=" + currentId;
// Yeni sayfaya yönlendirme
window.location.href = newUrl;
});Yukarıdaki kod, ileri butonuna tıklandığında "currentId" değişkenini artırır ve bir sonraki sorunun id'sini oluşturmak için yeni bir URL oluşturur. Son olarak, bu yeni URL'e yönlendirir.
Not: Yukarıdaki kodu kullanmadan önce, mevcut sayfanın URL'sinde sorgu parametresi olarak "soru" adında bir parametrenin varlığına dikkat etmelisiniz. Eğer yoksa, ilk soruya yönlendirilmelisiniz. Ayrıca, URL'de başka sorgu parametreleri varsa, bunları da yeni URL'de kullanmanız gerekiyor.
Eğer sayfa yenilenmeden sorular arasında geçiş yapmak istiyorsanız, JavaScript kullanmanız gerekmektedir. İleri butonunu bir <a> etiketi olarak kullanmak için, href özelliğini boş bırakarak ve onclick olayını kullanarak JavaScript işlevi çağırmalısınız. İşlev, soruyu değiştirecek ve sayfa yenilenmeden yeni soruyu görüntüleyecektir.
<!DOCTYPE html>
<html>
<head>
<title>Soru Geçişi</title>
</head>
<body>
<div id="sorular">
<h2>Soru 1</h2>
<p>Bu sorunun cevabı nedir?</p>
<button class="btn btn-info next-o" onclick="gelecekSoru()">İleri</button>
</div>
<div id="soru2" style="display: none;">
<h2>Soru 2</h2>
<p>Bu sorunun cevabı nedir?</p>
<button class="btn btn-info next-o" onclick="gelecekSoru()">İleri</button>
</div>
<div id="soru3" style="display: none;">
<h2>Soru 3</h2>
<p>Bu sorunun cevabı nedir?</p>
<button class="btn btn-info next-o" onclick="gelecekSoru()">İleri</button>
</div>
<script>
function gelecekSoru() {
var soruDivler = document.querySelectorAll('#sorular > div');
var aktifSoruIndex = -1;
// Aktif sorunun indeksini bul
for (var i = 0; i < soruDivler.length; i++) {
if (soruDivler[i].style.display !== 'none') {
aktifSoruIndex = i;
break;
}
}
if (aktifSoruIndex >= 0 && aktifSoruIndex < soruDivler.length - 1) {
soruDivler[aktifSoruIndex].style.display = 'none'; // Aktif soruyu gizle
soruDivler[aktifSoruIndex + 1].style.display = 'block'; // Bir sonraki soruyu göster
}
}
</script>
</body>
</html>