我正在使用HTML，CSS和Javascript创建一个计算器。我坚持平方根功能

时间：2016-10-27 06:39:40

标签： javascript html css calculator math.sqrt

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

5 个答案:

答案 0 :(得分：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);

示例

＆＃13;
＆＃13; 
  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')
    }
  }
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

将平方根函数更改为：

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

它的作用是首先获取值，找到它的平方根并将其替换为计算器。

答案 2 :(得分：0)

您没有将value传递给函数sqrt（）

Get the value from input然后获取此

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

答案 3 :(得分：0)

据我所知，你没有为变量'val'赋值。我希望你的日常工作看起来像这样：

function sqrt（val）{
的document.getElementById（ “RO”）的innerHTML = Math.sqrt（VAL）;
}

这意味着您还需要通过调用按钮传递值。

答案 4 :(得分：0)

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

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.

相关问题
最新问题