JavaScript hesap makinesi değerler nasıl ekrana yansıtılır ve script içinde değer alınır?

ErrorCorrection · 16 Şubat 2023

Kod:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Calculator</title>
</head>
<style type="text/css">
 body {
 text-align: center;
 }
</style>
<body>
 <textarea style="width: 70px;"></textarea><br>
<button id="bir">1</button>
<button id="iki">2</button>
<button id="uc">3</button>
<button id="arti">+</button><br>
<button id="dort">4</button>
<button id="bes">5</button>
<button id="altı">6</button>
<button id="eksi">-</button><br>
<button id="yedi">7</button>
<button id="sekiz">8</button>
<button id="dokuz">9</button>
<button id="bolu">/</button><br>
<button style="width: 60px; margin-right: 10px; " id="sifir">0</button><button id="carpi">X</button>

<script type="text/javascript">

</script>

</body>
</html>

HTML kısmını hemen yaptım ama aklıma bir türlü nasıl ekrana basılan değerleri yazdırcağım gelmiyor hepsine script içinde onlick fonksiyonu mu tanımlıcam? Çok uğraştırır. Daha kolay bir yolu var mı?

Arkadaşlar ipuçları falan verin direk hesap makinesi kodlayıp al demeyin. Teşekkürler şimdiden.
@kaan.w

Ulubatlı Souness · 16 Şubat 2023

ErrorCorrection dedi:
Kod:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Calculator</title> </head> <style type="text/css"> body { text-align: center; } </style> <body> <textarea style="width: 70px;"></textarea><br> <button id="bir">1</button> <button id="iki">2</button> <button id="uc">3</button> <button id="arti">+</button><br> <button id="dort">4</button> <button id="bes">5</button> <button id="altı">6</button> <button id="eksi">-</button><br> <button id="yedi">7</button> <button id="sekiz">8</button> <button id="dokuz">9</button> <button id="bolu">/</button><br> <button style="width: 60px; margin-right: 10px; " id="sifir">0</button><button id="carpi">X</button> <script type="text/javascript"> </script> </body> </html>

HTML kısmını hemen yaptım ama aklıma bir türlü nasıl ekrana basılan değerleri yazdırcağım gelmiyor hepsine script içinde onlick fonksiyonu mu tanımlıcam? Çok uğraştırır. Daha kolay bir yolu var mı?

Arkadaşlar ipuçları falan verin direk hesap makinesi kodlayıp al demeyin. Teşekkürler şimdiden.

Document. Getelementbyıd(ID) document.write() alert() komutları ile.

ErrorCorrection · 16 Şubat 2023

Ulubatlı Souness dedi:
Document. Getelementbyıd(ID) document.write() alert() komutları ile.

Bende onu diyorum çok uğraştırır.
Mesela illa Click yapacak. Click yaptığınında hangi buttuona Click yaptığını nasıl yakalarım?

RaSGooL · 16 Şubat 2023

Bir fonksiyon yaz. Tüm butonlarda bu fonksiyonu çağır.

JavaScript:

const addActionToQueue = action => actionQueue += action;

HTML:

<button onclick="addActionToQueue('1')">1</button>
<button onclick="addActionToQueue('2')">2</button>
<button onclick="addActionToQueue('*')">*</button>
<!-- vs -->

Html kısmı sencede çok amelece değil mi? Js ye taşıyalım bence : )

ErrorCorrection · 16 Şubat 2023

doğru ya

RaSGooL dedi:
Bir fonksiyon yaz. Tüm butonlarda bu fonksiyonu çağır.

JavaScript:

const addActionToQueue = action => actionQueue += action;

HTML:

<button onclick="addActionToQueue('1')">1</button> <button onclick="addActionToQueue('2')">2</button> <button onclick="addActionToQueue('*')">*</button> 

Html kısmı sencede çok amelece değil mi? Js ye taşıyalım bence : )

RaSGooL dedi:
Bir fonksiyon yaz. Tüm butonlarda bu fonksiyonu çağır.

JavaScript:

const addActionToQueue = action => actionQueue += action;

HTML:

<button onclick="addActionToQueue('1')">1</button> <button onclick="addActionToQueue('2')">2</button> <button onclick="addActionToQueue('*')">*</button> 

HTML kısmı sence de çok amelece değil mi? JS'ye taşıyalım bence: )

Nasıl JS'ye taşicaz. Her butano tıklandığında farklı bir şey için. İçindeki değeri innerHtml diye alabiliriz. Zaten sadece 1, 2, 3, 4,+,- gibi şeyler var. Sonra ekrana yazdırdığımız şeyi eval() metodu ile sonuç olarak yazdırırız.

RaSGooL · 16 Şubat 2023

ErrorCorrection dedi:
Nasıl JS'ye taşıyacaz?

HTML:

<div id="calculator"></div>

JavaScript:

const calculatorEl = document.getElementById("calculator")
const actions = ["1", "2", "*"]

let actionQueue = "";

const addActionToQueue = action => actionQueue += action;

actions.forEach(x => {
    calculatorEl.innerHTML += `<button onclick="addActionToQueue('${x}')">${x}</button>`
})

ErrorCorrection · 16 Şubat 2023

RaSGooL dedi:

HTML:

<div id="calculator"></div>

JavaScript:

const calculatorEl = document.getElementById("calculator")
const actions = ["1", "2", "*"]

let actionQueue = "";

const addActionToQueue = action => actionQueue += action;

actions.forEach(x => {
    calculatorEl.innerHTML += `<button onclick="addActionToQueue('${x}')">${x}</button>`
})

=> bu simgeyi bilmiyorum hocam.

RaSGooL · 16 Şubat 2023

ErrorCorrection dedi:
=> bu simgeyi bilmiyorum hocam.

Arrow function olarak adlandırılıyor. Alttaki normal function ile aynı anlama geliyor.

JavaScript:

const calculatorEl = document.getElementById("calculator")
const actions = ["1", "2", "*"]

let actionQueue = "";

function addActionToQueue(action) {
    actionQueue += action;
}

actions.forEach(function(x) {
    calculatorEl.innerHTML += `<button onclick="addActionToQueue('${x}')">${x}</button>`
})

ErrorCorrection · 16 Şubat 2023

RaSGooL dedi:
Arrow function olarak adlandırılıyor. Alttaki normal function ile aynı anlama geliyor.

JavaScript:

const calculatorEl = document.getElementById("calculator") const actions = ["1", "2", "*"] let actionQueue = ""; function addActionToQueue(action) { actionQueue += action; } actions.forEach(function(x) { calculatorEl.innerHTML += `<button onclick="addActionToQueue('${x}')">${x}</button>` })

Hocan kodlarin ustune yorum satiri Ile ne yapmak istediginizi yazar misiniz? Kusura bakmayin yeniyim de.

RaSGooL · 16 Şubat 2023

ErrorCorrection dedi:
Hocan kodlarin ustune yorum satiri Ile ne yapmak istediginizi yazar misiniz? Kusura bakmayin yeniyim de.

Önemli değil dostum.

JavaScript:

// calculator id ye sahip elementi alıyoruz.
const calculatorEl = document.getElementById("calculator")

// Butonları tanımlayacağımız dizimiz.
const actions = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "*", "/", "+", "-"];

// Kullanıcının bastığı aksiyonları bu değişkende tutacağız.
let actionQueue = "";

// Herhangi bir aksiyon butonuna tıklandığında çalışacak. action kısmı actions dan bir değer olmalıdır.
function addActionToQueue(action) {
    // kullanıcının bastığı aksiyonu kuyruğuna ekliyoruz.
    actionQueue += action;
}

// Aksiyon butonları oluşturmak için actions dizisini for ile dönüyoruz.
actions.forEach(function(x) {
    // CalculatorEl parent elemente aksiyon butonunu ekliyoruz.
    // Buradaki önemli iki şey biri adı diğeri ise tıklandığında çalışacak fonksiyon.
    // Adı ve değeri x den gelen değeri atıyoruz.
    calculatorEl.innerHTML += `<button onclick="addActionToQueue('${x}')">${x}</button>`
})

JavaScript hesap makinesi değerler nasıl ekrana yansıtılır ve script içinde değer alınır?

ErrorCorrection

Hectopat

Ulubatlı Souness

Hectopat

ErrorCorrection

Hectopat

RaSGooL

Kilopat

ErrorCorrection

Hectopat

Dosya Ekleri

RaSGooL

Kilopat

ErrorCorrection

Hectopat

RaSGooL

Kilopat

ErrorCorrection

Hectopat

RaSGooL

Kilopat