Is there are function in JS which can help me to type plus symbol in html code?-CodePudding

I'm beginner in coding and i need to write a simple calculator.

Can you help me to write a function for button tag in html,where i can add plus symbol in my calculator's screen?

CodePudding user response：

In HTML, you can use + or + or + character codes to add a sign. For full list of mathematical characters see https://dev.w3.org/html5/html-author/charref

CodePudding user response：

You can make a function addchar that takes character as parameter and then update it using DOM.

Live Example:

function addchar(character){
   var initial = document.getElementById('screen').innerText;
   //getting the initial text on screen
   
   var final = initial   character;
   //making a variable "final" that contains "initial" and added character
   
   document.getElementById('screen').innerText = final
   //updating using DOM
    }

#screen{
  width: 200px;
  height: 20px;
  border: 2px solid red;
}

<div id="screen"></div>

<button onclick="addchar('7')">7</button>
<button onclick="addchar('8')">8</button>
<button onclick="addchar('9')">9</button>
<button onclick="addchar(' ')"> </button>

CodePudding user response：

I have this kind of code and i need to write a function for math symbols.

<html>
    <head>
        <title>Calculator</title>
        <style>
            thead, tbody {
                user-select: none;
            }
        </style>
    </head>
        <body>  
            <form> 
                <table border="1px">
                    <thead>
                        <tr>
                            <td colspan="4">
                                <input type="text" id="Screen" name="Screen" value="0" dir="rtl" readonly="readonly" maxlength="16"/>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><button type="button" onclick="inputNumber(this);">7</button></td>
                            <td><button type="button" onclick="inputNumber(this);">8</button></td>
                            <td><button type="button" onclick="inputNumber(this);">9</button></td>
                            <td><button type="button" onclick="">*</button></td>
                        </tr>
                        <tr>
                            <td><button type="button" onclick="inputNumber(this);">4</button></td>
                            <td><button type="button" onclick="inputNumber(this);">5</button></td>
                            <td><button type="button" onclick="inputNumber(this);">6</button></td>
                            <td><button type="button" onclick="">-</button></td>
                        </tr>
                        <tr>
                            <td><button type="button" onclick="inputNumber(this);">1</button></td>
                            <td><button type="button" onclick="inputNumber(this);">2</button></td>
                            <td><button type="button" onclick="inputNumber(this);">3</button></td>
                            <td><button type="button" onclick=""> </button></td>
                        </tr>
                        <tr>
                            <td><button type="button"> /-</button></td>
                            <td><button type="button" onclick="inputNumber(this);">0</button></td>
                            <td><button type="button" onclick="">.</button></td>
                            <td><button type="button">=</button></td>
                        </tr>
                    </tbody>
                </table>
            </form>
            <script>
                function inputNumber(that) {
                    var screen = document.getElementById('Screen');

                    if(screen.value.length < screen.getAttribute('maxlength'))
                        screen.value = Number(screen.value   that.innerText);
                }
        </script>
    </body>
</html>