2

所以我正在使用 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>

4

5 回答 5

1

vlaz 正确指出的第一个问题val是缺失的。因此，您将不得不获取它。

第二个问题是document.getElementById("ro").innerHTML = Math.sqrt(val);Inputsvalue没有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>

于 2016-10-27T06:52:26.850 回答
0

将您的平方根函数更改为：

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

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

于 2016-10-27T06:53:21.123 回答
0

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

Get the value from input然后得到这个的 sqrt

var val = document.getElementById("ro").value;
document.getElementById("ro").value = Math.sqrt(val);
于 2016-10-27T06:53:53.213 回答
0

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

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

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

于 2016-10-27T06:54:41.227 回答
0

从你希望它工作的方式来看（当点击'='计算器应该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.

于 2016-10-27T06:56:46.723 回答