szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:javascript|< JavaScript]]

====== Űrlap elérése ======

  * **Szerző:** Sallai András
  * Copyright (c) 2011, Sallai András
  * Licenc: GNU Free Documentation License 1.3
  * Web: https://szit.hu


===== Űrlap példa =====

<html>
<style>
.urlapPelda {
   display: inline-block;
   width: 80px;
}
</style>

<label class="urlapPelda">Teljes név: </label><input type="text" size="10" id="urlapPeldaFullName"><br>
<label class="urlapPelda">Település: </label><input type="text" size="10"><br>
<label class="urlapPelda">Cím: </label><input type="text" size="10"><br>
<label class="urlapPelda">Telefon: </label><input type="text" size="10"><br>
<label class="urlapPelda">Érdeklődés: </label><input type="text" size="10"><br>
<input type="radio" name="nem"> nő
<input type="radio" name="nem"> férfi<br>
<input type="checkbox" name="nem"> jármű<br>
<button id="regGomb">Regisztrál</button>

<script>
const regGomb = document.getElementById('regGomb');
const urlapPeldaFullName = document.getElementById('urlapPeldaFullName');

regGomb.addEventListener('click', function() {
   alert(urlapPeldaFullName.value);
});
</script>

</html>
===== Űrlap azonosítón keresztül =====
==== onclick attribútum ====

<code html>
<form name="urlap">
    <input type="text" id="szam"><br>
    <button type="button" 
    onclick="dupla()">Mehet</button>
</form>
</code>

<code javascript>
function dupla() {
    let szam = document.getElementById('szam').value;
    alert(szam * 2);
}
</code>



==== EventListener ====

<code html>
<form name="urlap">
    <input type="text" id="szam"><br>
    <button type="button" id="duplaGomb">Dupla</button>
</form>
</code>

<code javascript>
let duplaGomb = document.getElementById('duplaGomb');
let szamObj = document.getElementById('szam');

duplaGomb.addEventListener('click', function(){
    let szam = szamObj.value;
    alert(szam * 2);
});
</code>

==== Élő ====

<html>
Szám: <input id="egy" type="text" size="2">
<input type="button" value="Dupla" onclick="
let szam1 = document.getElementById('egy').value;
document.getElementById('egy').value = szam1 * 2;
">
</html>

===== Űrlap a form elemen keresztül =====

==== Paraméterként ====


Duplázás:
<code html>
<form>
    <input type="text" name="szam"><br>
    <button type="button" 
    onclick="dupla(this.form)">Mehet</button>
</form>
</code>


<code javascript>
function dupla(urlap) {
    let szam = urlap.elements['szam'].value;
    alert(szam * 2);
}
</code>

==== Tulajdonság ====


<code html>
<form name="urlap">
    <input type="text" name="szam"><br>
    <button type="button" 
    onclick="dupla()">Mehet</button>
</form>
</code>


<code javascript>
function dupla() {
    let szam = urlap.szam.value;
    alert(szam * 2);
}
</code>


==== Tömb ====

<code html>
<form name="urlap">
    <input type="text" name="szam"><br>
    <button type="button" 
    onclick="dupla()">Mehet</button>
</form>
</code>


<code javascript>
function dupla() {
    let szam = document.forms['urlap']['szam'].value;
    alert(szam * 2);
}
</code>




===== Elérés azonosítokkal =====
==== Duplázó ====

<code html>
<label for="szam">Szám: </label>
<input type="text" id="szam">
<button id="gomb">Számít</button>
<p id="eredmeny"></p>
</code>

<code javascript>
document.getElementById("gomb").onclick = function(){
    let szam = document.getElementById("szam").value;
    let eredmeny = szam*2;
    document.getElementById("eredmeny").innerHTML = eredmeny;
};
</code>

==== Rádiógomb ====
<code html>
<input type="radio" id="nemNo"> nő
<input type="radio" id="nemFerfi"> férfi

<button id="mehetGomb">Mehet</button>

</code>


<code javascript>
const nemNo = document.getElementById('nemNo');
const nemFerfi = document.getElementById('nemFerfi');

const mehetGomb = document.getElementById('mehetGomb');

mehetGomb.addEventListener('click', function(){
    console.log(nemFerfi.checked);
    if(nemFerfi.checked) {
        console.log('Férfi');
    }else if(nemNo.checked){
        console.log('Nő');
    }else {
        console.log('Nincs megjelölve');
    }
});
</code>

==== Checkbox ====

<code html>
<input type="checkbox" id="opel"> Opel
<input type="checkbox" id="ford"> Ford

<button id="mehetGomb">Mehet</button>
</code>

<code javascript>
const opel = document.getElementById('opel');
const ford = document.getElementById('ford');

const mehetGomb = document.getElementById('mehetGomb');

mehetGomb.addEventListener('click', function(){
    if(opel.checked) {
        console.log('Opel');
    }
    if(ford.checked){
        console.log('Ford');
    }
});
</code>

===== Függelék =====

==== Téglalap ====

<code javascript>
function kerulet(){
    let a = document.teglalap.aoldal.value;
    let b = document.teglalap.boldal.value;
    document.teglalap.aoldal.value =  (eval(a) + eval(b)) * 2;
}
...
<form name="teglalap">
<fieldset>
<legend>Téglalap</legend>
a oldal: <input type="text" name="aoldal" id="ao"><br>
b oldal: <input type="text" name="boldal" id="bo"><br>
<input type="button" value="Kerület" onclick="kerulet()">
</fieldset>
</form>
</code>


==== Téglalap kerület ====

Kód:
<code html index.html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Téglalap</title>

<script type="text/javascript" >
function kerulet() {
	let a = document.teglalap.aoldal.value;
	let b = document.teglalap.boldal.value;
	document.teglalap.aoldal.value =  (eval(a) + eval(b)) * 2;
	document.teglalap.boldal.value =  "";
	document.getElementById("acimke").innerHTML = "Kerület:";
	document.getElementById("bcimke").style.display = "none";
	document.getElementById("bo").style.display = "none";	
}
</script>
<style type="text/css">
form {
	width: 400px;
	display: inline-block;
}
#urlap {
	text-align: center;
}
legend, fieldset {
	border-style: solid;
	border-width: 1px;
	border-color: blue;
}
body {
	background-color: #90EE90;
}
</style>
</head>
<body>

<div id="urlap">
<form name="teglalap">
<fieldset>
<legend>Téglalap kerületszámítás</legend>
<label for="aoldal" id="acimke">a oldal:</label> <input type="text" name="aoldal" id="ao"><br>
<label for="boldal" id="bcimke">b oldal:</label> <input type="text" name="boldal" id="bo"><br>
<input type="button" value="Kerület" onclick="kerulet()">
</fieldset>
</form>
</div>

</body>
</html>
</code>


Minta:

<html>
<iframe src="https://szit.hu/download/peldak/javascript/teglalapkerulet.html" width="500" height="300"></iframe>
</html>

==== HTML elem vizsgálata ====

<code html>
    <button id="gomb">Mehet</button>
    <script src="app.js"></script>
</code>

<code javascript app.js>

const gomb = document.querySelector('#gomb')

var csinal = () => {
    console.log('van')
}

if(gomb) {
    gomb.addEventListener('click', csinal)
}

</code>
szit

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon
