所以我正在使用 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>最佳答案
正如 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>关于javascript - 我正在使用 HTML、CSS 和 Javascript 创建一个计算器。我被困在平方根函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40277815/