Çözüldü Javascript kodum Wordpress sayfasında çalışmıyor

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

WhatsTheMatter

Hectopat
Katılım
23 Şubat 2019
Mesajlar
617
Çözümler
1
Wordpress sayfalarımdan birine, Chatgpt'ye kodlattırdığım basit bir hesap aracı ekleyeceğim.

Problem şu ki bu kodu WP sayfalarımdan birine yapıştırdığımda kod çalışmıyor. Kutular görünüyor ama hesap yapılmıyor.

Chatgpt bunu JS ile yazdı ve "sırf HTML & CSS ile yazarsa hesaplama fonksiyonunun çalışmayacağını" söyledi. O yüzden JS'e muhtaçmışım. Tamam da WP'de çalışmıyor ki arkadaş. En meşhur dil, en meşhur sistemde nasıl çalışmaz?!?
 
Son düzenleyen: Moderatör:
Çözüm
dgknbzglu
Öncelikle panelden Görünüm -> Tema Dosya Düzenleyicisi'ne gir.
"style.css" dosyasının en altına CSS kodlarını ekle:
CSS: 
/* Add some style to make the calculator look nice */
      .calculator {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .calculator input {
        margin: 5px;
        padding: 5px;
      }
      .calculator label {
        display: block;
      }
      .calculator .loss {
        display: none; /* Hide the loss input by default */
      }
      .calculator .result {
        margin: 15px;
        font-size: 20px;
        font-weight: bold;
      }

Sen nereye eklemek istiyorsun, nereye eklemeye çalıştın bilmiyorum ama ben Görünüm->Bileşenler'in içine girip bir "Özel HTML" bileşeni ekledim ve içerisinde kodu tamamen yazdım:
HTML: 
    <div class="calculator">
      <label>Hurda fiyatı(kg):</label>
      <input type="number" id="price">
      <label>Hurda miktarı(kg):</label>
      <input type="number" id="amount">
      <label>Fire var mı?</label>
      <input type="checkbox" id="hasLoss">
      <div class="loss">
        <label>Yüzde kaç fire var?</label>
        <input type="number" id="loss">
      </div>
      <button onclick="calculate()">Hesapla</button>
      <div class="result">Sonuç: ₺0</div>
    </div>
    <script>
      // Add the logic to calculate the result
      function calculate() {
        const price = document.getElementById('price').value;
        const amount = document.getElementById('amount').value;
        const hasLoss = document.getElementById('hasLoss').checked;
        let loss = 0;
        if (hasLoss) {
          loss = document.getElementById('loss').value;
        }
        const result = (price * amount * (1 - loss / 100)).toFixed(2);
        document.querySelector('.result').innerHTML = `Sonuç: ₺${result}`;
      }

      // Show or hide the loss input depending on the checkbox
      document.getElementById('hasLoss').addEventListener('change', (event) => {
        const lossInput = document.querySelector('.loss');
        if (event.target.checked) {
          lossInput.style.display = 'block';
        } else {
          lossInput.style.display = 'none';
        }
      });
    </script>

Daha sonra anasayfamda kodu çalıştırabildim. Aşağıya da video şeklinde ekledim çalıştığını.
Umarım yardımcı olmuşumdur, kolay gelsin.

Bu içeriği görüntülemek için üçüncü taraf çerezlerini yerleştirmek için izninize ihtiyacımız olacak.
Daha detaylı bilgi için, çerezler sayfamıza bakınız.
Tarihe göre sırala Puana göre sırala
bomi dedi:
Kullandığın kod başka bir kütüphane kullanıyor olabilir, onlarıda head etiketi içerisine dahil etmelisiniz. Kullanılan bi kütüphane var mı?
Genişletmek için tıkla...
Kimse cevap vermezken siz verdiniz, çok teşekkür ederim.
Sayfada sadece bir resim ve 1-2 cümle var. Başka hiçbir şey yok, kütüphane falan yok.
Ben coder değilim, Chatgpt'ye İngilizce komutlar vererek harika bir şekilde yaptırdığım hesaplama aracımı Wordpressteki bir sayfama eklemek için 3 saat civarı uğraştım ve ekleyemedim de. Değişik eklentiler kullandım, yine olmadı. Snippet, şu, bu, vesaire.
Halbuki kod w3schoolsun kod deneme sayfasında mükemmel bir şekilde çalışıyor. Yani sorun wordpresste.
 
Artı 0 Eksi
WhatsTheMatter dedi:
Kimse cevap vermezken siz verdiniz, çok teşekkür ederim.
Sayfada sadece bir resim ve 1-2 cümle var. Başka hiçbir şey yok, kütüphane falan yok.
Ben coder değilim, Chatgpt'ye İngilizce komutlar vererek harika bir şekilde yaptırdığım hesaplama aracımı Wordpressteki bir sayfama eklemek için 3 saat civarı uğraştım ve ekleyemedim de. Değişik eklentiler kullandım, yine olmadı. Snippet, şu, bu, vesaire.
Halbuki kod w3schoolsun kod deneme sayfasında mükemmel bir şekilde çalışıyor. Yani sorun wordpresste.
Genişletmek için tıkla...
Sorun WP'de değil, sorun kodunuzu WP'ye aktaramamanızda. WP'den anlamıyorum fazla ama siz yine de kodunuzu ekleyin buraya bir bakalım.
 
Artı 0 Eksi
dgknbzglu dedi:
Sorun WP'de değil, sorun kodunuzu WP'ye aktaramamanızda. WP'den anlamıyorum fazla ama siz yine de kodunuzu ekleyin buraya bir bakalım.
Genişletmek için tıkla...
Şu sitede gayet iyi çalışıyor. Dediğiniz gibi WP'ye aktaramadım. Aktarılıyor mu onu da bilmiyorum ya.
www.w3schools.com

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com www.w3schools.com

JavaScript: 
<html>
  <head>
    <style>
      /* Add some style to make the calculator look nice */
      .calculator {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .calculator input {
        margin: 5px;
        padding: 5px;
      }
      .calculator label {
        display: block;
      }
      .calculator .loss {
        display: none; /* Hide the loss input by default */
      }
      .calculator .result {
        margin: 15px;
        font-size: 20px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="calculator">
      <label>Hurda fiyatı(kg):</label>
      <input type="number" id="price">
      <label>Hurda miktarı(kg):</label>
      <input type="number" id="amount">
      <label>Fire var mı?</label>
      <input type="checkbox" id="hasLoss">
      <div class="loss">
        <label>Yüzde kaç fire var?</label>
        <input type="number" id="loss">
      </div>
      <button onclick="calculate()">Hesapla</button>
      <div class="result">Sonuç: ₺0</div>
    </div>
    <script>
      // Add the logic to calculate the result
      function calculate() {
        const price = document.getElementById('price').value;
        const amount = document.getElementById('amount').value;
        const hasLoss = document.getElementById('hasLoss').checked;
        let loss = 0;
        if (hasLoss) {
          loss = document.getElementById('loss').value;
        }
        const result = (price * amount * (1 - loss / 100)).toFixed(2);
        document.querySelector('.result').innerHTML = `Sonuç: ₺${result}`;
      }

      // Show or hide the loss input depending on the checkbox
      document.getElementById('hasLoss').addEventListener('change', (event) => {
        const lossInput = document.querySelector('.loss');
        if (event.target.checked) {
          lossInput.style.display = 'block';
        } else {
          lossInput.style.display = 'none';
        }
      });
    </script>
  </body>
</html>
 
Artı 0 Eksi
Öncelikle panelden Görünüm -> Tema Dosya Düzenleyicisi'ne gir.
"style.css" dosyasının en altına CSS kodlarını ekle:
CSS: 
/* Add some style to make the calculator look nice */
      .calculator {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .calculator input {
        margin: 5px;
        padding: 5px;
      }
      .calculator label {
        display: block;
      }
      .calculator .loss {
        display: none; /* Hide the loss input by default */
      }
      .calculator .result {
        margin: 15px;
        font-size: 20px;
        font-weight: bold;
      }

Sen nereye eklemek istiyorsun, nereye eklemeye çalıştın bilmiyorum ama ben Görünüm->Bileşenler'in içine girip bir "Özel HTML" bileşeni ekledim ve içerisinde kodu tamamen yazdım:
HTML: 
    <div class="calculator">
      <label>Hurda fiyatı(kg):</label>
      <input type="number" id="price">
      <label>Hurda miktarı(kg):</label>
      <input type="number" id="amount">
      <label>Fire var mı?</label>
      <input type="checkbox" id="hasLoss">
      <div class="loss">
        <label>Yüzde kaç fire var?</label>
        <input type="number" id="loss">
      </div>
      <button onclick="calculate()">Hesapla</button>
      <div class="result">Sonuç: ₺0</div>
    </div>
    <script>
      // Add the logic to calculate the result
      function calculate() {
        const price = document.getElementById('price').value;
        const amount = document.getElementById('amount').value;
        const hasLoss = document.getElementById('hasLoss').checked;
        let loss = 0;
        if (hasLoss) {
          loss = document.getElementById('loss').value;
        }
        const result = (price * amount * (1 - loss / 100)).toFixed(2);
        document.querySelector('.result').innerHTML = `Sonuç: ₺${result}`;
      }

      // Show or hide the loss input depending on the checkbox
      document.getElementById('hasLoss').addEventListener('change', (event) => {
        const lossInput = document.querySelector('.loss');
        if (event.target.checked) {
          lossInput.style.display = 'block';
        } else {
          lossInput.style.display = 'none';
        }
      });
    </script>

Daha sonra anasayfamda kodu çalıştırabildim. Aşağıya da video şeklinde ekledim çalıştığını.
Umarım yardımcı olmuşumdur, kolay gelsin.

Bu içeriği görüntülemek için üçüncü taraf çerezlerini yerleştirmek için izninize ihtiyacımız olacak.
Daha detaylı bilgi için, çerezler sayfamıza bakınız.
 
Artı 1 Eksi
Çözüm
dgknbzglu dedi:
Öncelikle panelden Görünüm -> Tema Dosya Düzenleyicisi'ne gir.
"style.css" dosyasının en altına CSS kodlarını ekle:
CSS: 
/* Add some style to make the calculator look nice */
      .calculator {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .calculator input {
        margin: 5px;
        padding: 5px;
      }
      .calculator label {
        display: block;
      }
      .calculator .loss {
        display: none; /* Hide the loss input by default */
      }
      .calculator .result {
        margin: 15px;
        font-size: 20px;
        font-weight: bold;
      }

Sen nereye eklemek istiyorsun, nereye eklemeye çalıştın bilmiyorum ama ben Görünüm->Bileşenler'in içine girip bir "Özel HTML" bileşeni ekledim ve içerisinde kodu tamamen yazdım:
HTML: 
    <div class="calculator">
      <label>Hurda fiyatı(kg):</label>
      <input type="number" id="price">
      <label>Hurda miktarı(kg):</label>
      <input type="number" id="amount">
      <label>Fire var mı?</label>
      <input type="checkbox" id="hasLoss">
      <div class="loss">
        <label>Yüzde kaç fire var?</label>
        <input type="number" id="loss">
      </div>
      <button onclick="calculate()">Hesapla</button>
      <div class="result">Sonuç: ₺0</div>
    </div>
    <script>
      // Add the logic to calculate the result
      function calculate() {
        const price = document.getElementById('price').value;
        const amount = document.getElementById('amount').value;
        const hasLoss = document.getElementById('hasLoss').checked;
        let loss = 0;
        if (hasLoss) {
          loss = document.getElementById('loss').value;
        }
        const result = (price * amount * (1 - loss / 100)).toFixed(2);
        document.querySelector('.result').innerHTML = `Sonuç: ₺${result}`;
      }

      // Show or hide the loss input depending on the checkbox
      document.getElementById('hasLoss').addEventListener('change', (event) => {
        const lossInput = document.querySelector('.loss');
        if (event.target.checked) {
          lossInput.style.display = 'block';
        } else {
          lossInput.style.display = 'none';
        }
      });
    </script>

Daha sonra anasayfamda kodu çalıştırabildim. Aşağıya da video şeklinde ekledim çalıştığını.
Umarım yardımcı olmuşumdur, kolay gelsin.

Bu içeriği görüntülemek için üçüncü taraf çerezlerini yerleştirmek için izninize ihtiyacımız olacak.
Daha detaylı bilgi için, çerezler sayfamıza bakınız.
Genişletmek için tıkla...
Hocam oldu!!!!!!!!
3 saat kafa yorup sinirden kendimi paraladığım şeyi, sayenizde birkaç dakikada hallettim!
Çok ama çok teşekkür ederim! Minnettarım size.
Bir de video çekmişsiniz, hay Allah razı olsun sizden. :)
Şuraya ekledim hesaplama aracını.
 
Artı 0 Eksi
Artı 1 Eksi

Benzer konular

Kreb0
  • Soru
Wordpress sitede JS kodları çalışmıyor
Mesaj
1
Görüntüleme
1B
Aliskrk1
Aliskrk1
smt55
  • Soru
WordPress Hesabım sayfasında "Adresler" yok
Mesaj
0
Görüntüleme
248
smt55
smt55
Berat.xx56
  • Çözüldü
Çözüldü  Javascript kodu çalışmıyor
Mesaj
5
Görüntüleme
361
533388
533388
hayl0s
  • Çözüldü
Çözüldü  JavaScript Kodu Çalışmıyor
Mesaj
3
Görüntüleme
1B
Kxaan
Kxaan
Gamekiller
JavaScript SetInterval
Mesaj
4
Görüntüleme
622
codelab
codelab

Yeni konular

Yeni mesajlar

Geri
Yukarı