Çözüldü JavaScript Kodu Çalışmıyor

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

hayl0s

Decapat
Katılım
17 Eylül 2021
Mesajlar
441
Çözümler
2
Daha fazla  
Cinsiyet
Erkek
Meslek
Öğretmen
Kodu çalıştırdığımda ekrana cevabı yazmıyor gözden kaçırdığım bir şey var ama anlamadım. Yardımcı olur musunuz?

JavaScript:
<!DOCTYPE html>
<html>
<head>
    <title>hafta1.3</title>
    <meta charset="utf-8">
    <style type="text/css">
        form{
            width: 600px;
            margin: auto;
        }
        #btnhesap{
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <form name="toplam">
        <h1>javascript işlem programı</h1>
        <label>1.sayı:</label>
        <input type="text" id="sayi1"><br><br>
        <label>2.sayı:</label>
        <input type="text" id="sayi2"><br><br>
        <input type="radio" name="islem" value="topla" id="topla">topla
        <input type="radio" name="islem" value="çıkar" id="cikar">çıkar
        <input type="radio" name="islem" value="çarp" id="carp">çarp
        <input type="radio" name="islem" value="böl" id="bol">böl<br><br><br>
        <input type="button" id="btnhesap" value="hesapla">
    </form>
    <div id="kututoplam"></div>
    <script type="text/javascript">
        var btn=document.getElementById("btnhesap");
        btn.onclick=function(){
            var s1=Number(document.getElementById("sayi1").value);
            var s2=Number(document.getElementById("sayi2").value);
            var sonuc;
            if (document.getElementById("topla").checked) {
                sonuc=s1+s2;
            }
            else if (document.getElementById("cikar").checked) {
                sonuc=s1-s2;
            }
            else if (document.getElementById("carp").checked) {
                sonuc=s1*s2;
            }
            else if (document.getElementById("bol").checked) {
                sonuc=s1/s2;
            }
            getElementById("kututoplam").innerHTML="sonuc:"+sonuc;

        }
    </script>
</body>
</html>
 
Çözüm
48. Satırda bulunan getElementById("kututoplam").innerHTML="sonuc:"+sonuc; kodu yüzünden çalışmıyor. Doğru yazılışı;

JavaScript:
document.getElementById("kututoplam").innerHTML="sonuc:"+sonuc;
48. Satırda bulunan getElementById("kututoplam").innerHTML="sonuc:"+sonuc; kodu yüzünden çalışmıyor. Doğru yazılışı;

JavaScript:
document.getElementById("kututoplam").innerHTML="sonuc:"+sonuc;
 
Çözüm
Çözülmüş fakat birkaç iyileştirme yaptığım halini paylaşayım; label, flexbox, prevent default, const, submit kullanımına bakın.
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Technopat</title>
    <style>
      body {
        display: flex;
        align-items: center;
        flex-direction: column;
      }
    </style>
  </head>
  <body>
    <form>
      <h1>Javascript islem programi</h1>
      <input type="number" id="n1" placeholder="Sayi 1" required />
      <input type="number" id="n2" placeholder="Sayi 2" required />
      <br />
      <input type="radio" id="topla" name="operation" />
      <label for="topla">Topla</label>
      <input type="radio" id="cikar" name="operation" />
      <label for="cikar">Cikar</label>
      <input type="radio" id="carp" name="operation" />
      <label for="carp">Carp</label>
      <input type="radio" id="bol" name="operation" />
      <label for="bol">Bol</label>
      <br />
      <button type="submit" id="btn">Hesapla</button>
      <input type="submit" value="" />
    </form>
    <h1 id="sonuc"></h1>
    <script>
      const btn = document.getElementById("btn");
      const result = document.getElementById("sonuc");
      btn.addEventListener("click", (e) => {
        e.preventDefault();
        const n1 = Number(document.getElementById("n1").value);
        const n2 = Number(document.getElementById("n2").value);
        result.innerHTML = "Sonuc: ";
        if (document.getElementById("topla").checked) {
          result.innerHTML += n1 + n2;
        } else if (document.getElementById("cikar").checked) {
          result.innerHTML += n1 - n2;
        } else if (document.getElementById("carp").checked) {
          result.innerHTML += n1 * n2;
        } else if (document.getElementById("bol").checked) {
          result.innerHTML += n1 / n2;
        }
      });
    </script>
  </body>
</html>
 

Yeni konular

Geri
Yukarı