我正在使用 HTML、CSS 和 Javascript 创建一个计算器。我被困在平方根函数

Question

所以我正在使用 HTML、CSS 和 javascript 创建一个计算器。我需要添加一个平方根函数来使用 Math.sqrt(x) 以及其他函数来计算数字的平方根，但我被困在平方根上。我似乎无法让它工作，已经有一段时间了。到目前为止，这是我所有的代码，我们将不胜感激。

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

vlaz 正确指出的第一期 val 缺失。所以你必须去取它。

第二个问题是 document.getElementById("ro").innerHTML = Math.sqrt(val); 输入 value 而不是 innerHTML。

尝试：

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

样本

  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>

Answer 2

将平方根函数更改为：

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

它所做的是先取值，找到它的平方根并在计算器中替换它。

Answer 3

您没有将 value 传递给函数 sqrt()

Get the value from input然后得到这个

的平方根

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

Answer 4

据我所知，您没有为变量 'val' 赋值。我希望您的例程看起来像这样：

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

这意味着您还需要从调用按钮传递一个值。

Answer 5

根据你希望它工作的方式来判断（当点击'='时，计算器应该 eval 文本框的内容）你应该在文本框中放一些东西 Math.sqrt像这样：

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.

我正在使用 HTML、CSS 和 Javascript 创建一个计算器。我被困在平方根函数

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

html

javascript

css

calculator

math.sqrt

样本