0

I am a little new to javascript, so as a little project I was trying to build a simple calculator which has following 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>

where screen, row, workplace, buttons and button-row are classes that I have created.

Paragraph with id 'scrcnt' is where I display the text. As you can see I am using setText for writing no.'s to screen, clear for clearing and del for deleting one character. But only setText is working and not the other two functions.

Following is the code in script tag 

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

Can you please assist me in finding the mistake?

mplungjan
  • 169,008
  • 28
  • 173
  • 236
tanay joshi burningknight7
  • 25
  • 1
  • 5

1 Answers1

2

There are two problems with your code: first of all you cannot edit a string in that way, so you have to use something like String.substr().

Also, you cannot use clear() as function name: 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>
rpadovani
  • 7,101
  • 2
  • 31
  • 50