Tekstin sijoittaminen elementtiin

Sisältää
tehtäviä!

Div-elementin lisääminen

Lisätään edellisen kappaleen sivulle div-elementti, johon voidaan sijoittaa tekstiä.

Identifioidaan elementti: id="taulu" . 

	<div id="taulu">Jotain tekstiä </div> 


<!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})">

<div id="taulu">Jotain tekstiä </div> 

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

Tekstin sijoittaminen div-kenttään

Dokumentissä olevan "taulu"-elementin sisältöön voidaan sijoittaa uutta tekstiä pistenotaatiolla. 

		document["taulu"].text = "Uusi teksti"

Alla olevassa erimerkissä funktio haeTeksti kirjoittaa käyttäjän input-kenttään syöttämän tekstin div-kenttään: 

<!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	#haetaan käyttäjän teksti
	document["taulu"].text = teksti		#sijoitetaan haettu teksti div kenttään
	
document['nappi1'].bind("click", haeTeksti)

</script>

</head>

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

<div id="taulu">Jotain tekstiä </div> 

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

Kokeile! Kirjoita funktioon rivi, mikä muuttaa napin value arvoksi tekstin.

Tehtävä 1:

Muokkaa koodia siten, että sivulla on etunimi- ja sukunimikentät ja ohjelma tulostaa etunimen ja sukunimen peräkkäin div-kenttään. Voit lisätä tulostukseen myös tervehdyksen.

Tehtävä 2:

Muokkaa koodia siten, että sivulla on salasana-kenttä (type="password"). Funktio testaa, onko salasana "123456" ja tulostaa testin tuloksen div-kenttään.
Tutustu if-lauseeseen sivulta.