Untitled

<html>
<head>
<style>
.tlo{
position: relative;
width: 320px;
height: 250px;
border: 3px solid black;
background: linear-gradient(to right, #11aaff, white);
}
.napis1{
position: absolute;
left: 20px;
top: 20px;
}
.napis2{
position: absolute;
left: 20px;
top: 75px;
}
.input1{
position: absolute;
left: 120px;
top: 18px;
border: 1px solid black;
}
.input2{
position: absolute;
left: 120px;
top: 72px;
border: 1px solid black;
}
.oblicz{
position: absolute;
left: 135px;
top: 120px;
border: 1px solid black;
}
.w{
position: absolute;
left: 140px;
top: 165px;

}
.kwadrat{
position: absolute;
left: 120px;
top: 160px;
width: 80px;
height: 60px;
border: 1px solid black;
background-color: red;
}
</style>
</head>
<body>
<pre>
<script>
function funkcja(){
var a=parseFloat(document.getElementById("o1").value)
var b=parseFloat(document.getElementById("o2").value)
//wykladnik 0
if(b==0){
ww=1
}
//wykladnik >0
else if(b>0){
ww=1
for(c=1;c<=b;c++){
ww=ww*a
}
}
//wykladnik <0
else if(b<0){
wy=1
for(c=1;c<=b;c++){
wy=wy*a
ww=1/ww
}
}

paragraf=document.getElementById("wynik")
paragraf.innerHTML=ww
}
</script>
</pre>

<div class="tlo">

<!-- formularz -->
<form name="formularz">

<div class="napis1">
Podstawa:
</div>

<div class="input1">
<input type="text" id="o1"/><br>
</div>

<div class="napis2">
Wykładnik:
</div>

<div class="input2">
<input type="text" id="o2"/>
</div>
<div class="oblicz">
<input type="button" value="Oblicz" onClick="funkcja()"/>
</div>

</form>

<div class="kwadrat">
</div>
<p class="w" id="wynik"></p>
</div>


</body>
</html>