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

Question

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>

score 1 · Answer 1 · answered Oct 27 '16 at 06:52

First issue as rightly pointed by vlaz, val is missing. So you will have to fetch it.

Second issue is document.getElementById("ro").innerHTML = Math.sqrt(val); Inputs have value not innerHTML.

Try:

var val = document.querySelector("#ro").value
// or
// var val = document.getElementById("ro").value
document.getElementById("ro").value = Math.sqrt(val);

Sample

  function sqrt() {
    var val = document.querySelector("#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')
    }
  }

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;
}

<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>

score 0 · Answer 2 · answered Oct 27 '16 at 06:53

Change your square root function to this:

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

What it does is fetches the value first, finds its square root and replaces it in the calculator.

score 0 · Answer 3 · answered Oct 27 '16 at 06:53

0

You are not passing value to the function sqrt()

Get the value from input and then get sqrt of this

var val = document.getElementById("ro").value;
document.getElementById("ro").value = Math.sqrt(val);

answered Oct 27 '16 at 06:53

mamosek

316
2
6

score 0 · Answer 4 · answered Oct 27 '16 at 06:54

As far as I can see you're not assigning a value to the variable 'val'. I would expect your routine to look like this:

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

This means you'll also need to pass a value from your calling button too.

Robba · Accepted Answer · 2016-10-27T09:31:19.097

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").value;
    document.getElementById("ro").value = "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 = "√(" + val + ")";
  }

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

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

  function e() {
    try {
      var toEval = document.getElementById("ro").value.replace("√", "Math.sqrt");
      c(eval(toEval))
    } 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.

Glad to have been useful, I've updated the example to use the Math.sqrt symbol in the textbox while editing, you could use something like that too. — Robba, Oct 27 '16 at 09:31

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

5 Answers5

Sample