JS kodu nasıl daha temiz hale getirilebilir?

kaiimbi · 9 Ekim 2022

Merhaba felsefe projem icin bir odev yapiyordum ancak kodum cok uzun oldu. Python'da nasıl yapardim biliyorum ama JS ilk kez kullanıyorum acaba nasıl kisaltabilirim kodu kisaltmanizi istemiyorum sadece neyi nasıl yapicagami soylerseniz sevinirim teşekkürler.

Kod:

var q1a, q2a, q3a, q4a, q5a, q6a, q7a, q8a, q9a, q10a, q11a, q12a.
var q1q,a1q,q2q,a2q,q3q,a3q,q4q,a4q,q5q,a5q,q6q,a6q,q7q,a7q,q8q,a8q,q9q,a9q,q10q,a10q,q11q,a11q,q12q,a12q
var wrong = new Audio('wrong.mp3');
function resetall(){
q1q=a1q=q2q=a2q=q3q=a3q=q4q=a4q=q5q=a5q=q6q=a6q=q7q=a7q=q8q=a8q=q9q=a9q=q10q=a10q=q11q=a11q=q12q=a12q=false
 if (q1a==true) {
 console.log(q1a)
 }
 else{
 document.querySelectorAll('#q1').forEach(e => e.style.color = 'rgb(255,255,255)');
 }
 if (q2a==true) {
 console.log(q2a)
 }
 else{
 document.querySelectorAll('#q2').forEach(e => e.style.color = 'rgb(255,255,255)');
 }
 if (q3a==true) {
 console.log(q3a)
 }
 else{
 document.querySelectorAll('#q3').forEach(e => e.style.color = 'rgb(255,255,255)');
 }
 if (q4a==true) {
 console.log(q4a)
 }
 else{
 document.querySelectorAll('#q4').forEach(e => e.style.color = 'rgb(255,255,255)');
 }
 if (q5a==true) {
 console.log(q5a)
 }
 else{
 document.querySelectorAll('#q5').forEach(e => e.style.color = 'rgb(255,255,255)');
 }
 if (q6a==true) {
 console.log(q6a)
 }
 else{
 document.querySelectorAll('#q6').forEach(e => e.style.color = 'rgb(255,255,255)');
 }
 if (q7a==true) {
 console.log(q7a)
 }
 else{
 document.querySelectorAll('#q7').forEach(e => e.style.color = 'rgb(255,255,255)');
 }
 if (q8a==true) {
 console.log(q8a)
 }
 else{
 document.querySelectorAll('#q8').forEach(e => e.style.color = 'rgb(255,255,255)');
 }
 if (q9a==true) {
 console.log(q9a)
 }
 else{
 document.querySelectorAll('#q9').forEach(e => e.style.color = 'rgb(255,255,255)');
 }
 if (q10a==true) {
 console.log(q10a)
 }
 else{
 document.querySelectorAll('#q10').forEach(e => e.style.color = 'rgb(255,255,255)');
 }
 if (q1a==true) {
 console.log(q11a)
 }
 else{
 document.querySelectorAll('#q11').forEach(e => e.style.color = 'rgb(255,255,255)');
 }
 if (q12a==true) {
 console.log(q12a)
 }
 else{
 document.querySelectorAll('#q12').forEach(e => e.style.color = 'rgb(255,255,255)');
 }
}
resetall()
function q1(){
 resetall()
 q1q=true
 if (q1a!=true) {
 document.querySelectorAll('#q1').forEach(e => e.style.color = 'rgb(255,255,0)');
 }

}
function a1(){
 if (q1q==true||q1a==true) {
 console.log("true");
 document.querySelectorAll('#q1').forEach(e => e.style.color = 'rgb(0,255,0)');
 document.querySelectorAll('#a1').forEach(e => e.style.color = 'rgb(0,255,0)');
 q1a = true.
 }
 else{
 console.log("wrong");
 wrong.play();
 resetall()
 document.querySelectorAll('#q1').forEach(e => e.style.color = 'rgb(255,255,255)');
 setTimeout(function() {document.querySelectorAll('#a1').forEach(e => e.style.color = 'rgb(255,255,255)');},300)
 document.querySelectorAll('#a1').forEach(e => e.style.color = 'rgb(255,0,0)');
 }
}
function q2(){
 resetall()
 q2q=true
 if (q2a!=true) {
 document.querySelectorAll('#q2').forEach(e => e.style.color = 'rgb(255,255,0)');
 }
}
function a2(){
 if (q2q==true||q2a==true) {
 console.log("true");
 document.querySelectorAll('#q2').forEach(e => e.style.color = 'rgb(0,255,0)');
 document.querySelectorAll('#a2').forEach(e => e.style.color = 'rgb(0,255,0)');
 q2a = true.
 }
 else{
 console.log("wrong");
 wrong.play();
 resetall()
 document.querySelectorAll('#q2').forEach(e => e.style.color = 'rgb(255,255,255)');
 setTimeout(function() {document.querySelectorAll('#a2').forEach(e => e.style.color = 'rgb(255,255,255)');},300)
 document.querySelectorAll('#a2').forEach(e => e.style.color = 'rgb(255,0,0)');
 }
}
function q3(){
 resetall()
 q3q=true
 if (q3a!=true) {
 document.querySelectorAll('#q3').forEach(e => e.style.color = 'rgb(255,255,0)');
 }
}
function a3(){
 if (q3q==true||q3a==true) {
 console.log("true");
 document.querySelectorAll('#q3').forEach(e => e.style.color = 'rgb(0,255,0)');
 document.querySelectorAll('#a3').forEach(e => e.style.color = 'rgb(0,255,0)');
 q3a = true.
 }
 else{
 console.log("wrong");
 wrong.play();
 resetall()
 document.querySelectorAll('#q3').forEach(e => e.style.color = 'rgb(255,255,255)');
 setTimeout(function() {document.querySelectorAll('#a3').forEach(e => e.style.color = 'rgb(255,255,255)');},300)
 document.querySelectorAll('#a3').forEach(e => e.style.color = 'rgb(255,0,0)');
 }
}
function q4(){
 resetall()
 q4q=true
 if (q4a!=true) {
 document.querySelectorAll('#q4').forEach(e => e.style.color = 'rgb(255,255,0)');
 }
}
function a4(){
 if (q4q==true||q4a==true) {
 console.log("true");
 document.querySelectorAll('#q4').forEach(e => e.style.color = 'rgb(0,255,0)');
 document.querySelectorAll('#a4').forEach(e => e.style.color = 'rgb(0,255,0)');
 q4a = true.
 }
 else{
 console.log("wrong");
 wrong.play();
 resetall()
 document.querySelectorAll('#q4').forEach(e => e.style.color = 'rgb(255,255,255)');
 setTimeout(function() {document.querySelectorAll('#a4').forEach(e => e.style.color = 'rgb(255,255,255)');},300)
 document.querySelectorAll('#a4').forEach(e => e.style.color = 'rgb(255,0,0)');
 }
}
function q5(){
 resetall()
 q5q=true
 if (q5a!=true) {
 document.querySelectorAll('#q5').forEach(e => e.style.color = 'rgb(255,255,0)');
 }
}
function a5(){
 if (q5q==true||q5a==true) {
 console.log("true");
 document.querySelectorAll('#q5').forEach(e => e.style.color = 'rgb(0,255,0)');
 document.querySelectorAll('#a5').forEach(e => e.style.color = 'rgb(0,255,0)');
 q5a = true.
 }
 else{
 console.log("wrong");
 wrong.play();
 resetall()
 document.querySelectorAll('#q5').forEach(e => e.style.color = 'rgb(255,255,255)');
 setTimeout(function() {document.querySelectorAll('#a5').forEach(e => e.style.color = 'rgb(255,255,255)');},300)
 document.querySelectorAll('#a5').forEach(e => e.style.color = 'rgb(255,0,0)');
 }
}
function q6(){
 resetall()
 q6q=true
 if (q6a!=true) {
 document.querySelectorAll('#q6').forEach(e => e.style.color = 'rgb(255,255,0)');
 }
}
function a6(){
 if (q6q==true||q6a==true) {
 console.log("true");
 document.querySelectorAll('#q6').forEach(e => e.style.color = 'rgb(0,255,0)');
 document.querySelectorAll('#a6').forEach(e => e.style.color = 'rgb(0,255,0)');
 q6a = true.
 }
 else{
 console.log("wrong");
 wrong.play();
 resetall()
 document.querySelectorAll('#q6').forEach(e => e.style.color = 'rgb(255,255,255)');
 setTimeout(function() {document.querySelectorAll('#a6').forEach(e => e.style.color = 'rgb(255,255,255)');},300)
 document.querySelectorAll('#a6').forEach(e => e.style.color = 'rgb(255,0,0)');
 }
}
function q7(){
 resetall()
 q7q=true
 if (q7a!=true) {
 document.querySelectorAll('#q7').forEach(e => e.style.color = 'rgb(255,255,0)');
 }
}
function a7(){
 if (q7q==true||q7a==true) {
 console.log("true");
 document.querySelectorAll('#q7').forEach(e => e.style.color = 'rgb(0,255,0)');
 document.querySelectorAll('#a7').forEach(e => e.style.color = 'rgb(0,255,0)');
 q7a = true.
 }
 else{
 console.log("wrong");
 wrong.play();
 resetall()
 document.querySelectorAll('#q7').forEach(e => e.style.color = 'rgb(255,255,255)');
 setTimeout(function() {document.querySelectorAll('#a7').forEach(e => e.style.color = 'rgb(255,255,255)');},300)
 document.querySelectorAll('#a7').forEach(e => e.style.color = 'rgb(255,0,0)');
 }
}
function q8(){
 resetall()
 q8q=true
 if (q8a!=true) {
 document.querySelectorAll('#q8').forEach(e => e.style.color = 'rgb(255,255,0)');
 }
}
function a8(){
 if (q8q==true||q8a==true) {
 console.log("true");
 document.querySelectorAll('#q8').forEach(e => e.style.color = 'rgb(0,255,0)');
 document.querySelectorAll('#a8').forEach(e => e.style.color = 'rgb(0,255,0)');
 q8a = true.
 }
 else{
 console.log("wrong");
 wrong.play();
 resetall()
 document.querySelectorAll('#q8').forEach(e => e.style.color = 'rgb(255,255,255)');
 setTimeout(function() {document.querySelectorAll('#a8').forEach(e => e.style.color = 'rgb(255,255,255)');},300)
 document.querySelectorAll('#a8').forEach(e => e.style.color = 'rgb(255,0,0)');
 }
}
function q9(){
 resetall()
 q9q=true
 if (q9a!=true) {
 document.querySelectorAll('#q9').forEach(e => e.style.color = 'rgb(255,255,0)');
 }
}
function a9(){
 if (q9q==true||q9a==true) {
 console.log("true");
 document.querySelectorAll('#q9').forEach(e => e.style.color = 'rgb(0,255,0)');
 document.querySelectorAll('#a9').forEach(e => e.style.color = 'rgb(0,255,0)');
 q9a = true.
 }
 else{
 console.log("wrong");
 wrong.play();
 resetall()
 document.querySelectorAll('#q9').forEach(e => e.style.color = 'rgb(255,255,255)');
 setTimeout(function() {document.querySelectorAll('#a9').forEach(e => e.style.color = 'rgb(255,255,255)');},300)
 document.querySelectorAll('#a9').forEach(e => e.style.color = 'rgb(255,0,0)');
 }
}
function q10(){
 resetall()
 q10q=true
 if (q10a!=true) {
 document.querySelectorAll('#q10').forEach(e => e.style.color = 'rgb(255,255,0)');
 }
}
function a10(){
 if (q10q==true||q10a==true) {
 console.log("true");
 document.querySelectorAll('#q10').forEach(e => e.style.color = 'rgb(0,255,0)');
 document.querySelectorAll('#a10').forEach(e => e.style.color = 'rgb(0,255,0)');
 q10a = true.
 }
 else{
 console.log("wrong");
 wrong.play();
 resetall()
 document.querySelectorAll('#q10').forEach(e => e.style.color = 'rgb(255,255,255)');
 setTimeout(function() {document.querySelectorAll('#a10').forEach(e => e.style.color = 'rgb(255,255,255)');},300)
 document.querySelectorAll('#a10').forEach(e => e.style.color = 'rgb(255,0,0)');
 }
}
function q11(){
 resetall()
 q11q=true
 if (q11a!=true) {
 document.querySelectorAll('#q11').forEach(e => e.style.color = 'rgb(255,255,0)');
 }
}
function a11(){
 if (q11q==true||q11a==true) {
 console.log("true");
 document.querySelectorAll('#q11').forEach(e => e.style.color = 'rgb(0,255,0)');
 document.querySelectorAll('#a11').forEach(e => e.style.color = 'rgb(0,255,0)');
 q11a = true.
 }
 else{
 console.log("wrong");
 wrong.play();
 resetall()
 document.querySelectorAll('#q11').forEach(e => e.style.color = 'rgb(255,255,255)');
 setTimeout(function() {document.querySelectorAll('#a11').forEach(e => e.style.color = 'rgb(255,255,255)');},300)
 document.querySelectorAll('#a11').forEach(e => e.style.color = 'rgb(255,0,0)');
 }
}
function q12(){
 resetall()
 q12q=true
 if (q12a!=true) {
 document.querySelectorAll('#q12').forEach(e => e.style.color = 'rgb(255,255,0)');
 }
}
function a12(){
 if (q12q==true||q12a==true) {
 console.log("true");
 document.querySelectorAll('#q12').forEach(e => e.style.color = 'rgb(0,255,0)');
 document.querySelectorAll('#a12').forEach(e => e.style.color = 'rgb(0,255,0)');
 q12a = true.
 }
 else{
 console.log("wrong");
 wrong.play();
 resetall()
 document.querySelectorAll('#q12').forEach(e => e.style.color = 'rgb(255,255,255)');
 setTimeout(function() {document.querySelectorAll('#a12').forEach(e => e.style.color = 'rgb(255,255,255)');},300)
 document.querySelectorAll('#a12').forEach(e => e.style.color = 'rgb(255,0,0)');
 }
}

phan metal · 9 Ekim 2022

For döngüsü ve dizi kullanmalısın.

Kod:

q[] // dizi oluşturma syntaxi.
qA[] // dizi oluşturma syntaxi

for syntaxi{
    
    if(q[index]){
        q[index] = true;
    }

}

Böyle kısa yazdırılabilir. Yalnız allocate ne kadar olur ve garbage collector falan var mı bilmiyorum

RaSGooL · 9 Ekim 2022

Evet çok uzun olmuş. Genel bir fonksiyon yazabilirsin. Ayrıca değişkenleri bir Array de tutmak da mantıklı olabilir. Hatta q1q ve q1q gibi değişkenler oluşturmak yerine ortak bir Object nesnesi üzerinden ilerlenebilir.

JS kodu nasıl daha temiz hale getirilebilir?

Ayrıntılı düzenleme

kaiimbi

Centipat

phan metal

Centipat

RaSGooL

Kilopat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz