Odak modu

JavaScript

Input içerisinden Değer Almak

Input İçerisinden Değer Almak

Bu yazımızda input içerisinden değer almayı inceleyeceğiz. Öncelikle input oluşturmak ile başlayalım.

Input Oluşturma

Dinamik olarak input oluşturmak için;

var myInput=document.createElement("input");

Input'umuzu oluşturduktan sonra gerekli olan özellik eklemelerini yapıyoruz.

myInput.setAttribute("id", "inputumuz");
myInput.setAttribute("type","text");
myInput.setAttribute("value","Buraya Yazın");

Böylece input ve özellikleri oluşturuldu. Şimdi HTML içine bu input'u yerleştiriyoruz.

1.adım

Body içine bir div oluşturalım. (Daha sonra input'u buraya atayacağız.)

var myDiv = document.createElement("div");

şeklinde yapabiliriz.

2.adım

appendChild fonksiyonu ile input'u bu div'e ekleyelim.

myDiv.appendChild(myInput);

Input Değerini Alma

Artık input'umuz oluştu ve değerini alabiliriz.

var inputDeger = document.getElementById("inputumuz").value;

Değeri alert olarak ekranda göstermek için;

window.alert(inputDeger)  // Değerimiz burada yazacak

Alıştırmalar

  1. Bir input oluşturup yanına ekleyeceğimiz buton ile butona tıkladığımızda değerimiz alt satırda alalım.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text" id="myInput" value="Buraya yazınız."><button onclick="myFunction()">Tıklayınız</button><p id="myP"></p>

</body>
</html>
 function myFunction(){
        var x = document.getElementById("myInput").value;
  document.getElementById("myP").innerHTML = ("Değerimiz:" + " " + x );
      }

Aşağıda codepen ile deneyimleyebilirsiniz.

2.Bir validation form oluşturup e-mail, yaş ve isim bilgilerini standartlara uygun şekilde alalım.

 <!DOCTYPE html>
<html>

<head>
	<script type="text/javascript" src="scripts.js">
	</script>
	<link rel="stylesheet" href="styles.css">
</head>

<body>

	<form action="/learn/action_page.php" onsubmit="return sampleFunction()">
		Name (max 15 characters): <input type="text" id="fname" size="15" name="fname"><br>
 Age (from 1 to 100): <input type="text" id="age" size="3" name="age"><br>
 E-mail: <input type="text" id="email" size="25" name="mail"><br><br><input type="submit" value="Submit"> 
</form>



</body>
</html>
function sampleFunction() {
  var at = document.getElementById("email").value.indexOf("@");
  var age = document.getElementById("age").value;
  var fname = document.getElementById("fname").value;
  submitOK = "true";

  if (fname.length > 10) {
    alert("The name may have no more than 10 characters");
    submitOK = "false";
  }

  if (isNaN(age) || age < 1 || age > 100) {
    alert("The age must be a number between 1 and 100");
    submitOK = "false";
  }

  if (at == -1) {
    alert("Not a valid e-mail!");
    submitOK = "false";
  }

  if (submitOK == "false") {
    return false;
  }
}

2.Alıştırmayı Denemek için Tıklayın


Kaynaklar

Background Pattern
Birlikte öğrenelim

Sektörde en çok aranan yazılım becerilerini kazan

Yapay zeka desteği, birebir mentörlük saatleri, canlı dersler ve senin için özel hazırlanmış içeriklerle eksiklerini tamamla, düzenli geri bildirimler al ve öğrenme sürecini en verimli hale getir.

Yunus Emre Kabakcı

Patika+ mezunu

Patika+ Fullstack Web Development Bootcamp mezunumuz Yunus Emre,

3 ay içinde Katar’dan aldığı teklif ile, global bir şirket olan Pavo Group’da işe başladı!

“İçerik zenginliği, mentor desteği, ileriye dönük bir network sağlaması ve dünyada en çok tercih edilen frameworkler üzerinden bir eğitim veriyor olması Patika+’ı tercih etmemin temel sebepleri oldu!“

Test

Yorumlar

Yorum yapabilmek için derse kayıt olmalısın!