1つの関数が正常に動作し、他の関数が正しく動作しない

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が 'scrcnt'の段落は、テキストを表示する場所です。あなたが見ることができるように、私は画面にno、を書き込むためにsetTextを使用しています。しかし、setTextだけが動作しており、他の2つの関数は動作しません。続き

は、スクリプトタグ内のコード

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

コードには2つの問題があります。まず、そのような方法で文字列を編集できないため、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>