JavaScript .oninput Olay Örneği

Bu örneğimizde “.oninput” olayını kullanarak basit bir hesaplama örneği yapacağız.

“.oninput” nesneye değer girildiğinde veya nesnenin içerisindeki değer değiştirildiğinde butona gerek duymaksızın, belirlenen yere sonucu yazdırır.


<input type="text" id="sayi1">
<input type="text" id="sayi2">
<input type="text" id="islem" value="+">

Html: Sayıları kullanıcıdan almak için text nesnesi oluşturuyoruz. Hangi işlemin yapılacağını ayrı bir text oluşturduk ve sonucu ekrana yazdırmak için bir div oluşturduk. İşlem ilk başta varsayılan olarak toplama işlemini yapacaktır.


var nesneS1=document.getElementById("sayi1");
var nesneS2=document.getElementById("sayi2");
var islem=document.getElementById("islem");
var nesneGoster=document.getElementById("goster");

var nesneS1=document.getElementById("sayi1");

var nesneS2=document.getElementById("sayi2");

var islem=document.getElementById("islem");

var nesneGoster=document.getElementById("goster");

JavaScript: Nesneleri değişken içeresinde atayarak tanımlıyoruz.


nesneS1.oninput=islemOlay;
nesneS2.oninput=islemOlay;
islem.oninput=islemOlay;

nesneS1.oninput=islemOlay;

nesneS2.oninput=islemOlay;

islem.oninput=islemOlay;

“.oninput” input etiketinin içerisine değer girildiğinde/değiştirildiğinde bir butona basmaya gerek duymaksızın ekrana yazdırır.

“.oninput” olayını nesnelere atıyoruz. Böylece ilk sayı girildiğinde ekrana yazdıracak, ikinci sayı girildiğinde varsayılanı toplama ayarladığımız için iki sayıyı toplayıp ekrana yazdıracaktır.


function islemOlay(e)
{
	var sayi1=Number(nesneS1.value);
	var sayi2=Number(nesneS2.value);
			
	if(islem.value=="+")
	  {
	    nesneGoster.innerHTML=sayi1+sayi2;
	  }
	else if(islem.value=="-")
          {
	   nesneGoster.innerHTML=sayi1-sayi2;
	  }
	else if(islem.value=="*")
	  {
	   nesneGoster.innerHTML=sayi1*sayi2;
	  }
	else if(islem.value=="/")
	  {
	   nesneGoster.innerHTML=sayi1/sayi2;
	  }
	else
	 {
	   nesneGoster.innerHTML="Tanımlanmayan Operatör";
	 }
}

function islemOlay(e)

{

var sayi1=Number(nesneS1.value);

var sayi2=Number(nesneS2.value);

if(islem.value=="+")

{

nesneGoster.innerHTML=sayi1+sayi2;

}

else if(islem.value=="-")

{

nesneGoster.innerHTML=sayi1-sayi2;

}

else if(islem.value=="*")

{

nesneGoster.innerHTML=sayi1*sayi2;

}

else if(islem.value=="/")

{

nesneGoster.innerHTML=sayi1/sayi2;

}

else

{

nesneGoster.innerHTML="Tanımlanmayan Operatör";

}

Nesneleri sayıya çevirdikten sonra operatörler için uygulanacak kodları yazıyoruz ve tanımladığımız div nesnesinin içerisinde gösterilmesini sağlıyoruz. Belirlenen operatörler dışında bir operatör kullanıldığı takdirde ise “Tanımlanmayan Operatör” yazısı ekranda yazacaktır.

Etiketlerin içerlerindeki değerlerini değiştirmek için JavaScriptten çekerken; kapanışı olan etiketler için (div etiketi gibi ) “.innerHTML” kullanılırken kendi içerisinde kapanan etiketler için (input etiketleri gibi) “.value” kullanılır. Böylece değişiklik yaparken içlerindeki değerler de değişir. “goster” divinin içerisine sonucu yazdırırken de “.innerHTML” kullanıyoruz.

Css: Son olarak stil kodlarını ekleyerek nesneleri alt alta alıyorum ve dive kenarlık ekleyerek yerini belirliyorum.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	
	input{
		display: block;
		margin: 10px;
	}	
	#goster{
		width: 152px;
		height: 35px;
		margin: 10px;
		border: 1px solid #848484;
		background:  #EDEDED;
		padding: 3px;
		
	}
	
</style>
</head>

<body>
	<input type="text" id="sayi1">
	<input type="text" id="sayi2">
	<input type="text" id="islem" value="+">

<!doctype html>

<html>

<head>

<style>

input{

display: block;

margin: 10px;

}

#goster{

width: 152px;

height: 35px;

margin: 10px;

border: 1px solid #848484;

background: #EDEDED;

padding: 3px;

}

</style>

</head>

<body>


var nesneS1=document.getElementById("sayi1"); 
var nesneS2=document.getElementById("sayi2"); 
var islem=document.getElementById("islem"); 
var nesneGoster=document.getElementById("goster"); 
nesneS1.oninput=islemOlay; 
nesneS2.oninput=islemOlay; 
islem.oninput=islemOlay; 
function islemOlay(e) { 
var sayi1=Number(nesneS1.value); 
var sayi2=Number(nesneS2.value); 
if(islem.value=="+") { 
nesneGoster.innerHTML=sayi1+sayi2; 
} 
else if(islem.value=="-") { 
nesneGoster.innerHTML=sayi1-sayi2; 
} 
else if(islem.value=="*") { 
nesneGoster.innerHTML=sayi1*sayi2; 
} 
else if(islem.value=="/") { 
nesneGoster.innerHTML=sayi1/sayi2; 
} 
else { 
nesneGoster.innerHTML="Tanımlanmayan Operatör"; 
} 
} 
</body> 
</html>

var nesneS1=document.getElementById("sayi1");

var nesneS2=document.getElementById("sayi2");

var islem=document.getElementById("islem");

var nesneGoster=document.getElementById("goster");

nesneS1.oninput=islemOlay;

nesneS2.oninput=islemOlay;

islem.oninput=islemOlay;

function islemOlay(e) {

var sayi1=Number(nesneS1.value);

var sayi2=Number(nesneS2.value);

if(islem.value=="+") {

nesneGoster.innerHTML=sayi1+sayi2;

}

else if(islem.value=="-") {

nesneGoster.innerHTML=sayi1-sayi2;

}

else if(islem.value=="*") {

nesneGoster.innerHTML=sayi1*sayi2;

}

else if(islem.value=="/") {

nesneGoster.innerHTML=sayi1/sayi2;

}

else {

nesneGoster.innerHTML="Tanımlanmayan Operatör";

}

</body>

</html>

Diğer Örnekler:

3 Yorum

Ahmet dedi ki:

Temmuz 30, 2022, 3:33 am

Oneinput kullanarak aynı sayfa içerisinde bir toplama işlemini 2 farklı yerde gösterebilir miyiz?

Cevapla
- Ahmet dedi ki:
  
  Temmuz 30, 2022, 3:58 am
  
  tek function içinde yapınca oluyormuş
  
  Cevapla
furkan dedi ki:

Aralık 11, 2018, 11:18 pm

cidden böyle bir sayfanın az görüntülenmesine üzüldüm.

Cevapla

Diğer Örnekler:

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

3 Yorum

Yorum yap X

Web Tasarım & Programlama sitesinden daha fazla şey keşfedin