Parametrin hakeminen elementistä

Sisältää
tehtäviä!

Tekstikentän lisääminen

Lisätään sivulle input elementti, johon voidaan kirjoittaa 

	<input type="input" value="Kirjoita jotain" id="teksti1" />

Elementin parametri type määrittelee tekstikentän, value määrittelee tekstikentän sisällön ja id identifioi tekstikentän yksikäsitteisesti. 

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://www.matikki.fi/guidebook-python/brython/brython380/brython.js"></script>

<title>Brython</title>

<script type="text/python">

</script>

</head>

<body onload="brython({debug:1,indexedDB: false})">

<input type="button" value="Klikkaa" id="nappi1" />
<br />
<input type="input" value="Kirjoita jotain" id="teksti1" />

</body>
</html>

Huomaa! Tekstikentän ja napin välissä on rivinvaihto-käsky <br />.

Tekstin hakeminen tekstikentästä

Dokumentissä olevan "teksti1"-elementin value-parametrin arvo voidaan hakea muuttujaan teksti pistenotaatiolla. 

		teksti = document["teksti1"].value

Tämän jälkeen muuttujaa teksti voidaan käsitellä miten halutaan, erimerkiksi funktiossa haeTeksti: 

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://www.matikki.fi/guidebook-python/brython/brython380/brython.js"></script>

<title>Brython</title>

<script type="text/python">
from browser import document, alert

def haeTeksti(event):
	teksti = document["teksti1"].value
	teksti = "Kirjoitit juuri: " + teksti
	alert(teksti)
	
document['nappi1'].bind("click", haeTeksti)

</script>

</head>

<body onload="brython({debug:1,indexedDB: false})">

<input type="button" value="Klikkaa" id="nappi1" />
<br />
<input type="input" value="Kirjoita jotain" id="teksti1" />
</body>
</html>

Kokeile! Muuta edellisen esimerkin tekstikentän parametrin type arvoksi password.

Tekstin hakeminen tekstiä sisältävistä elementeistä

Dokumentissä olevien tekstiä sisältävien elementtien sisältö voidaan hakea text-arvolla 

		teksti = document["elementinId"].text

Jos teemme esimerkiksi sivulle otsikon <h1 id="kentta">Jokin sivuotsikko</h1> 

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://www.matikki.fi/guidebook-python/brython/brython380/brython.js"></script>

<title>Brython</title>

<script type="text/python">
from browser import document, alert

def haeTeksti(event):
	teksti = document["kentta"].text
	teksti = "Otsikossa lukee: " + teksti
	alert(teksti)
	
document['nappi1'].bind("click", haeTeksti)

</script>

</head>

<body onload="brython({debug:1,indexedDB: false})">

<h1 id="kentta">Jokin sivuotsikko</h1>

<input type="button" value="Klikkaa" id="nappi1" />
<br />
<input type="input" value="Kirjoita jotain" id="teksti1" />
</body>
</html>

Tehtävä 1:

Muuta nappiin kirjoitettua ohjelmaa siten, että haet teksti-kentän type- ja id-parametrin ja tulostat ne jossain järkevässä muodossa.

Tehtävä 2:

Muuta nappiin kirjoitettua ohjelmaa siten, että haet teksti- ja otsikkokentän sisällöt ja tulostat ne jossain järkevässä muodossa.