一个功能正常工作，其他功能不适用

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>

其中屏幕，行，工作区，按钮和按钮行是我创建的类。

带有id＆＃39; scrcnt＆＃39;的段落是我显示文本的地方。正如您所看到的，我正在使用setText来编写禁止屏幕，清除清除和删除一个字符的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>