W3-SI.com     HTML CSS JavaScript Načrtovanje    
  logotip  
SERŠ Maribor Iskanje Primeri

Onemogočanje spreminjanja vrednosti

Koda:
<script type="text/javascript">
function omogoci(a)
{
var x=document.forms.obrazec.vnos
x.disabled=a
}

function sirina(s)
{
var x=document.forms.obrazec.vnos
if (x.disabled==false)
  {
  x.style.width=s + "px"
  }
}

function barva(b)
{
var x=document.forms.obrazec.vnos
if (x.disabled==false)
  {
  x.style.background=b
  }
}
</script>
<form id="obrazec">
<textarea name="vnos" class="moj" style="height:100px">
Pisanje komentarjev se marsikomu zdi mučno in nepotrebno delo.
Toda kadar boste čez leta želeli spreminjati svoj program,
se bo pogosto zgodilo, da ne boste vedeli, kaj ste želeli
narediti. Kako naj vas potem razumejo še vrednost2.
</textarea>
<br />
<input type="button" onclick="omogoci(true)"
       value="OnemogoČi spreminjanje" class="moj" />
<input type="button" onclick="omogoci(false)"
       value="OmogoČi spreminjanje" class="moj" />
<br />
<input type="button" onclick="sirina(200)" class="moj"
       value="Širina 200 točk" />
<input type="button" onclick="sirina(300)" class="moj"
       value="Širina 300 točk" />
<input type="button" onclick="sirina(400)" class="moj"
       value="Širina 400 točk" />
<br />
<input type="button" onclick="barva('#FF0000')" class="moj"
       value="Rdeče ozadje" />
<input type="button" onclick="barva('#00FF00')" class="moj"
       value="Zeleno ozadje" />
<input type="button" onclick="barva('#0000FF')" class="moj"
       value="Modro ozadje" />
</form>
Izgled v
brskalniku:



Razlaga: Imamo obrazec obrazec, kateri vsebuje polje z besedilom textarea ter sedem gumbkov. Gumbek za omogočanje in gumbek za onemogočanje spreminjanja oblike polja z besedilom, tri gumbke za spreminjanje velikosti tega polja in tri gumbke za spreminjanje barve tega polja. Ob kliku na gumbek onemogoči spreminjanje oz. omogoči spreminjanje se pokliče funkcija omogoci() s parametrom true oz. false, kar pomeni da spremenljivki x.disabled, ki je deklarirana kot vnosno polje priredi vrednost true oz. false. Gumbki za spreminjanje velikosti polja z besedilom kličejo funkcijo sirina() s parametri 200, 300 in 400, kar kasneje pomeni širina tega vnosnega polja. Funkcija sirina() najprej preveri če je vrednost spremenljivke x.disabled enaka false, kar pomeni, da je omogočeno spreminjanje polja. Če je spreminjanje omogočeno, stavek x.style.width=s + "px" spremeni velikost polja z besedilom na velikost s, ki je enaka parametru gumbka s katerim smo klicali funkcijo. Podobno je pri gumbkih za spreminjanje barve ozadja polja z besedilom, kjer ob kliku na gumbek kličemo funkcijo barva() s parametri ki pomenijo barvo zapisano v šestnajstiškem sistemu. Funkcija tako kot prejšnja preveri, če je omogočeno spreminjanje polja z besedilom in če je omogočeno se izvede stavek x.style.background=b, ki spremeni barvo ozadja, kjer spremenljivka b predstavla vrednost parametra ko smo klicali funkcijo.

SERŠ Maribor : Strokovna gimnazija : 2004 : Davorin Lenart