Űrlap elérése

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

Űrlap példa

Teljes név:
Település:
Cím:
Telefon:
Érdeklődés:
nő férfi
jármű

Űrlap azonosítón keresztül

onclick attribútum

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

function dupla() {
    let szam = document.getElementById('szam').value;
    alert(szam * 2);
}

EventListener

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

let duplaGomb = document.getElementById('duplaGomb');
let szamObj = document.getElementById('szam');
 
duplaGomb.addEventListener('click', function(){
    let szam = szamObj.value;
    alert(szam * 2);
});

Élő

Szám:

Űrlap a form elemen keresztül

Paraméterként

Duplázás:

<form>
    <input type="text" name="szam"><br>
    <button type="button" 
    onclick="dupla(this.form)">Mehet</button>
</form>

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

Tulajdonság

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

function dupla() {
    let szam = urlap.szam.value;
    alert(szam * 2);
}

Tömb

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

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

Elérés azonosítokkal

Duplázó

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

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

Rádiógomb

<input type="radio" id="nemNo"> nő
<input type="radio" id="nemFerfi"> férfi
 
<button id="mehetGomb">Mehet</button>

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');
    }
});

Checkbox

<input type="checkbox" id="opel"> Opel
<input type="checkbox" id="ford"> Ford
 
<button id="mehetGomb">Mehet</button>

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');
    }
});

Függelék

Téglalap

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>

Téglalap kerület

Kód:

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>

Minta:

HTML elem vizsgálata

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

app.js

const gomb = document.querySelector('#gomb')
 
var csinal = () => {
    console.log('van')
}
 
if(gomb) {
    gomb.addEventListener('click', csinal)
}