Select etiketi içinde seçili olan option etiketlerinin toplamını hesaplayıp ekrana yazdıran program;
Select kutusunun multiple özelliği kullanılarak aktif edilip, birden fazla seçim ile yapılan değerlerin toplamı sonuc etiketi içine yazdırıran program.
Programın çalışma mantığı select kutusuna her tıklandığında select kutusundaki tüm alanlar(burada option nesneleri oluyor) üzerinde for döngüsü ile dönüp seçili olanarı(if ile) topluyor.
Döngü bittikten sonra toplanan sayıları idsi sonuc olan etiket içine innerHTML özelliği ile yazdırıyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>:) JavaScript Örnekleri</title> </head> <style> select{ width:200px; height: 300px; } option{ height: 27px; background: #E7E7E7; border:solid 1px #25373D; } option:checked, option:hover{ color:#E7E7E7; background:#282830; } #sonuc{ position: absolute; left:250px; top:0px; width: 300px; height: 300px; line-height: 300px; font-size: 3em; background: #FEC606; color:#60646D; text-align: center; } </style> <body> <select id="sayilar" multiple> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> <option value="60">60</option> <option value="70">70</option> <option value="80">80</option> <option value="90">90</option> <option value="100">100</option> </select> <div id="sonuc">0</div> <script> var sonuc=document.getElementById("sonuc"); var sayilar=document.getElementById("sayilar"); sayilar.onclick=function(){ var toplam=0; /* tüm option nesnenleri üzerinde dönüş yapıyoruz.*/ for (var i=0, uzunluk=this.options.length; i<uzunluk; i++) { opt = this.options[i]; /*seçili olan option nesnelerini öğreniyoruz.*/ if ( opt.selected ) { /*seçili olan option nesneleri üzerinde toplama işlemi yapıyoruz.*/ toplam+=Number(opt.value); } } sonuc.innerHTML=toplam; } </script> </body> </html> |
İyi akşamlar evet çalıştı teşekkürler,
Sizden bi ricam olacak Nöbet ücreti hesaplama programı yaptım kendi sitemde yayınlıyorum, fakat iki checkbox işaretli iken iki alanda hesaplama yapıp sonucu toplayıp sonuc kısmına yazmasını bir türlü yapamadım. Bu konuda yardımcı olurmusunuz.
Farklı şekillerde çözümlemek mümkün ama bu şekilde de çözümlemek mümkün.
var chk1=document.querySelector(“#chk1”);
var chk2=document.querySelector(“#chk2”);
var txt1=document.querySelector(“#txt1”);
var txt2=document.querySelector(“#txt2”);
var hesapla=document.querySelector(“#hesapla”);
var sonucNesne=document.getElementById(“sonuc”);
hesapla.onclick=function(){
var sonuc=Number(sonucNesne.innerHTML);
console.log(sonucNesne.innerHTML);
//checkboxlar sonuca ekleniyor
sonuc = chk1.checked == true ?sonuc+Number(txt1.value):0;
sonuc = chk2.checked == true ?sonuc+Number(txt2.value):0;
//sonuc değeri div içine yazdırılıyor.
sonucNesne.innerHTML=sonuc;
}
çalışmıyor iki sayıyı toplamıyor maalesef
HTMLde birden fazla nesneyi seçmek için CTRL+Farenin Solu tuşu kullanılır. Bu şekilde yaptığında çalıştığını göreceksin.