Uděláme si seznam ve kterém půjde konfigurovat dárky pro svoje kamarády. Dárky ale nesmí překročit nějaký rozpočet - a to nám bude kontrolovat javascript

V html existuje formulářový prvek select s možnostmi option:

<p>Mamince:
 <select id="darek_pro_maminku">
  <option value="100">Kalendář</option>
  <option value="0">Nakreslit obrázek</option>
  <option value="500">Parfém</option>
  </select>
</p>

V javascriptu můžeme načíst hodnotu formulářového prvku input, select, atp následujícím kódem:

var cena_darku_pro_maminku = document.getElementById('darek_pro_maminku').value

V javascriptu si vytvoříme funkci, která se jmenuje moje_funkce. Mezi chlupatými závorkami je kód, který se vykoná:

function moje_funkce(){
alert("Zmacknuto tlacitko")
}

V html kódu uděláme tlačítko, můžeme mu dát atribut onclick, a v něm volání javascriptové funkce.

<button onclick="moje_funkce()">Pracuj!</button>

Pokud jsme si načtením hodnoty (viz výše) načetli hodnotu do proměnné, můžeme na základě její hodnoty něco udělat:

var cena_darku_pro_maminku = parseInt(document.getElementById('darek_pro_maminku').value)
if(cena_darku_pro_maminku > 100){
 alert("Drahý dárek!")
}else{
 alert("Není to tak drahé")
}

(Všimni si použití funkce parseInt pro převedení řetězce na číslo)

Abychom nepoužívali jenom nezvhledný příkaz alert, můžeme v javascriptu přímo měnit obsah html prvku:

<div id="text">...</div>
<script>
document.getElementById('text').innerHTML = 'Hodnota z javascriptu'
</script>

případně měnit prvku například barvu pozadí

document.getElementById('text').style.color = 'green'