Emma Emma - 1 month ago 10
CSS Question

I'm creating a calculator using with HTML, CSS and Javascript. I'm stuck at the square root function

So I am creating a calculator using HTML,CSS and javascript. I need to add a square root function to calculate the square root of a number using Math.sqrt(x) along with other functions but I am stuck at square root. I can't seem to get it to work, been at it for a while. This all my code so far any help will be appreciated.



<!DOCTYPE html>

<head>
<h1><center>Emma' Calculator</center></h1>
</head>

<div class="back">
<div class="readonly">
<input type="text" readonly size="20" id="ro">
</div>
<div class="key">

<p>
<input type="button" class="button one" value="√" onclick="sqrt()">

<input type="button" class="button one" value="?" onclick='v("?")'>

<input type="button" class="button one" value="CE" onclick='v("")'>

<input type="button" class="button one" value="C" onclick='c("")'>
</p>

<p>
<input type="button" class="button two" value="7" onclick='v("7")'>

<input type="button" class="button two" value="8" onclick='v("8")'>

<input type="button" class="button two" value="9" onclick='v("9")'>

<input type="button" class="button one" value="+" onclick='v("+")'>
</p>

<p>
<input type="button" class="button two" value="4" onclick='v("4")'>

<input type="button" class="button two" value="5" onclick='v("5")'>

<input type="button" class="button two" value="6" onclick='v("6")'>

<input type="button" class="button one" value="-" onclick='v("-")'>
</p>

<p>
<input type="button" class="button two" value="1" onclick='v("1")'>

<input type="button" class="button two" value="2" onclick='v("2")'>

<input type="button" class="button two" value="3" onclick='v("3")'>

<input type="button" class="button one" value="*" onclick='v("*")'>
</p>

<p>
<input type="button" class="button two" value="0" onclick='v("0")'>

<input type="button" class="button one" value="." onclick='v(".")'>

<input type="button" class="button two" value="=" onclick='e()'>

<input type="button" class="button one" value="/" onclick='v("/")'>
</p>
</div>
</div>



<style>
body {
background-color: #d9b3ff;
}
.back {
position: absolute;
background-color: #33004d;
width: 250px;
height: 320px;
left: 40%;
top: 200px;
}
.readonly {
position: relative;
width: 220px;
left: 15px;
top: 20px;
height: 40px;
}
.readonly input {
position: relative;
left: 2px;
top: 2px;
height: 35px;
color: black;
background-color: #ffe6f7;
font-size: 21px;
text-align: justify;
}
.key {
position: relative;
top: 30px;
}
.button {
width: 41px;
height: 32px;
border: none;
margin-left: 14px;
}
.button.one {
color: white;
background-color: #b300b3;
}
.button.two {
color: black;
background-color: #ffe6ff;
}
</style>



<script>
function sqrt() {
document.getElementById("ro").innerHTML = Math.sqrt(val);
}

function c(val) {
document.getElementById("ro").value = val;
}

function v(val) {
document.getElementById("ro").value += val;
}

function e() {
try {
c(eval(document.getElementById("ro").value))
} catch (e) {
c('Error')
}
}
</script>




Answer

Judging by the way you want this to work (when hitting '=' the calculator should eval the content of the textbox) you should probably put something in the textbox what does the Math.sqrt like this:

function sqrt() {
    var val = document.getElementById("ro").innerHTML;
    document.getElementById("ro").innerHTML = "Math.sqrt(" + val + ")";
}

<!DOCTYPE html>

<head>
  <h1><center>Emma' Calculator</center></h1>
</head>

<div class="back">
  <div class="readonly">
    <input type="text" readonly size="20" id="ro">
  </div>
  <div class="key">

    <p>
      <input type="button" class="button one" value="√" onclick="sqrt()">

      <input type="button" class="button one" value="?" onclick='v("?")'>

      <input type="button" class="button one" value="CE" onclick='v("")'>

      <input type="button" class="button one" value="C" onclick='c("")'>
    </p>

    <p>
      <input type="button" class="button two" value="7" onclick='v("7")'>

      <input type="button" class="button two" value="8" onclick='v("8")'>

      <input type="button" class="button two" value="9" onclick='v("9")'>

      <input type="button" class="button one" value="+" onclick='v("+")'>
    </p>

    <p>
      <input type="button" class="button two" value="4" onclick='v("4")'>

      <input type="button" class="button two" value="5" onclick='v("5")'>

      <input type="button" class="button two" value="6" onclick='v("6")'>

      <input type="button" class="button one" value="-" onclick='v("-")'>
    </p>

    <p>
      <input type="button" class="button two" value="1" onclick='v("1")'>

      <input type="button" class="button two" value="2" onclick='v("2")'>

      <input type="button" class="button two" value="3" onclick='v("3")'>

      <input type="button" class="button one" value="*" onclick='v("*")'>
    </p>

    <p>
      <input type="button" class="button two" value="0" onclick='v("0")'>

      <input type="button" class="button one" value="." onclick='v(".")'>

      <input type="button" class="button two" value="=" onclick='e()'>

      <input type="button" class="button one" value="/" onclick='v("/")'>
    </p>
  </div>
</div>



<style>
  body {
    background-color: #d9b3ff;
  }
  .back {
    position: absolute;
    background-color: #33004d;
    width: 250px;
    height: 320px;
    left: 40%;
    top: 200px;
  }
  .readonly {
    position: relative;
    width: 220px;
    left: 15px;
    top: 20px;
    height: 40px;
  }
  .readonly input {
    position: relative;
    left: 2px;
    top: 2px;
    height: 35px;
    color: black;
    background-color: #ffe6f7;
    font-size: 21px;
    text-align: justify;
  }
  .key {
    position: relative;
    top: 30px;
  }
  .button {
    width: 41px;
    height: 32px;
    border: none;
    margin-left: 14px;
  }
  .button.one {
    color: white;
    background-color: #b300b3;
  }
  .button.two {
    color: black;
    background-color: #ffe6ff;
  }
</style>



<script>
  function sqrt() {
      var val = document.getElementById("ro").value;
      document.getElementById("ro").value = "Math.sqrt(" + val + ")";
  }

  function c(val) {
    document.getElementById("ro").value = val;
  }

  function v(val) {
    document.getElementById("ro").value += val;
  }

  function e() {
    try {
      c(eval(document.getElementById("ro").value))
    } catch (e) {
      c('Error')
    }
  }
</script>

See the snippet below. If you don't like the Math.Sqrt() showing up in the textbox, you could change it to some other character and replace that just before the Eval.

Hope this helps.

Comments