javascript - 一项功能可以正常工作，而其他功能则不能

Question

我对 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;
    }

你能帮我找出错误吗？

Answer 1

您的代码有两个问题:首先，您不能以这种方式编辑字符串，因此您必须使用类似 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>