我对 javascript 有点陌生,所以作为一个小项目,我试图构建一个具有以下 html 的简单计算器。
<div class='screen row'>
<p class='col-12 col-t-12 col-s-12 screen-content' id='scrcnt'></p>
</div>
<div class = 'workplace row'>
<div class='button-row'>
<button class='buttons' type='button' onclick = "clear()" value='CLR'>CLR</button>
<button class ='buttons'type='button' onclick='del()'>DEL</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='('>(</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value=')'>)</button>
</div>
<div class='button-row'>
<button class='buttons' type='button' onclick='setText(this.value)' value='7'>7</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='8'>8</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='9'>9</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='/'>/</button>
</div>
<div class='button-row'>
<button class='buttons' type='button' onclick='setText(this.value)' value='4'>4</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='5'>5</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='6'>6</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='X'>X</button>
</div>
<div class='button-row'>
<button class='buttons' type='button' onclick='setText(this.value)' value='1'>1</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='2'>2</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='3'>3</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='-'>-</button>
</div>
<div class='button-row'>
<button class='buttons' type='button' onclick='setText(this.value)' value='.'>.</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='0'>0</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='='>=</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='+'>+</button>
</div>
</div>
其中 screen、row、workplace、buttons 和 button-row 是我创建的类。
ID 为“scrcnt”的段落是我显示文本的位置。正如您所看到的,我使用 setText 将数字写入屏幕,使用clear 进行清除,使用del 来删除一个字符。但只有 setText 起作用,其他两个函数不起作用。
以下是脚本标签中的代码
function clear()
{
document.getElementById('scrcnt').innerHTML = "";
}
function del()
{
var str = document.getElementById('scrcnt').innerHTML;
var len = str.length;
if(len>0)
{
str[len-1]="";
}
document.getElementById('scrcnt').innerHTML = str;
}
function setText(val)
{
var str = document.getElementById('scrcnt').innerHTML;
str = str + val;
document.getElementById('scrcnt').innerHTML = str;
}
你能帮我找出错误吗?
最佳答案
您的代码有两个问题:首先,您不能以这种方式编辑字符串,因此您必须使用类似 String.substr() 的内容。 .
此外,您不能使用 clear()
作为函数名称:Is "clear" a reserved word in Javascript?
function clr() {
document.getElementById('scrcnt').innerHTML = "";
}
function del() {
var str = document.getElementById('scrcnt').innerHTML;
var len = str.length;
if (len > 0 ) {
str = str.substr(0, len - 1);
}
document.getElementById('scrcnt').innerHTML = str;
}
function setText(val) {
var str = document.getElementById('scrcnt').innerHTML;
str = str + val;
document.getElementById('scrcnt').innerHTML = str;
}
<div class='screen row'>
<p class='col-12 col-t-12 col-s-12 screen-content' id='scrcnt'></p>
</div>
<div class = 'workplace row'>
<div class='button-row'>
<button class='buttons' type='button' onclick='clr()' value='CLR'>CLR</button>
<button class ='buttons'type='button' onclick='del()'>DEL</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='('>(</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value=')'>)</button>
</div>
<div class='button-row'>
<button class='buttons' type='button' onclick='setText(this.value)' value='7'>7</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='8'>8</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='9'>9</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='/'>/</button>
</div>
<div class='button-row'>
<button class='buttons' type='button' onclick='setText(this.value)' value='4'>4</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='5'>5</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='6'>6</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='X'>X</button>
</div>
<div class='button-row'>
<button class='buttons' type='button' onclick='setText(this.value)' value='1'>1</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='2'>2</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='3'>3</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='-'>-</button>
</div>
<div class='button-row'>
<button class='buttons' type='button' onclick='setText(this.value)' value='.'>.</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='0'>0</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='='>=</button>
<button class ='buttons'type='button' onclick='setText(this.value)' value='+'>+</button>
</div>
关于javascript - 一项功能可以正常工作,而其他功能则不能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38423018/