Is there a way to use html buttons to add text or number values to an input field using javascript

Question

Basically I'm trying to make a page that looks and works like a simple calculator. Can I use html buttons that when clicked add a number to the input field, then when another button is clicked, another number is added to the string.
Here is the html I've used to set up the buttons and "text" entry field. The function writeNumbers is where I intended to write the JS code to make this work. Any ideas on how to set up this functionality would be greatly welcomed!

<p id=demo><p>
<input id="text" type="text">

<button id="seven" type="button" onclick=writeNumbers()>7</button>
<button id="eight" type="button" onclick=writeNumbers()>8</button>
<button id="nine" type="button" onclick=writeNumbers()>9</button>
<br>
<button id="four" type="button" onclick=writeNumbers()>4</button>
<button id="five" type="button" onclick=writeNumbers()>5</button>
<button id="six" type="button" onclick=writeNumbers()>6</button>
<br>
<button id="one" type="button" onclick=writeNumbers()>1</button>
<button id="two" type="button" onclick=writeNumbers()>2</button>
<button id="three" type="button" onclick=writeNumbers()>3</button>
<br>
<button id="cancel" type="button" onclick=writeNumbers()>C</button>
<button id="zero" type="button" onclick=writeNumbers()>0</button>
<button id="equals" type="button" onclick=writeNumbers()>=</button>

I was considering using adding text to the text to the "p" element with 'demo' id as below but thought this was impractical

document.getElementById("demo").innerHTML = "7";

I had also tried using an event listener for the button with a document.write link thing but the number would not be entered into the box. Don't think document.write can be used with input fields. Plus this the code below is not an exact excerpt

document.getElementById("seven").addEventListener("click", document.write("7").);

Tried using the javascript code in the link below, it seemed ideal and could work if I add to it

add-a-string-of-text-into-an-input-field-when-user-clicks-a-button

I hope this helps clarifies what the aim is, please ask if you guys need anything else

You need to put in some effort and show us what JavaScript you tried and where it's failing. — j08691, Jun 28 '16 at 21:15

Ehsan · Accepted Answer · 2016-06-28T21:33:49.930

0

This help you :

<html>
    <head>
        <title></title>
    </head>
    <body>
        <input id="text" type="text"><br>
        <button id="seven" type="button" onclick=writeNumbers(this)>7</button>
        <button id="eight" type="button" onclick=writeNumbers(this)>8</button>
        <button id="nine" type="button" onclick=writeNumbers(this)>9</button>
        <br>
        <button id="four" type="button" onclick=writeNumbers(this)>4</button>
        <button id="five" type="button" onclick=writeNumbers(this)>5</button>
        <button id="six" type="button" onclick=writeNumbers(this)>6</button>
        <br>
        <button id="one" type="button" onclick=writeNumbers(this)>1</button>
        <button id="two" type="button" onclick=writeNumbers(this)>2</button>
        <button id="three" type="button" onclick=writeNumbers(this)>3</button>
        <br>
        <button id="cancel" type="button" onclick=c()>C</button>
        <button id="zero" type="button" onclick=writeNumbers(this)>0</button>
        <button id="equals" type="button" onclick=writeNumbers(this)>=</button>
        <br>
        <script>
            function writeNumbers(el) {
                var txt = document.getElementById("text");
                var number = el.innerHTML;
                txt.value = txt.value + number;
                
            }
            function c() {
                var txt = document.getElementById("text");
                txt.value = "";
            }
        </script>
    </body>
    </html>

edited Jun 28 '16 at 21:33

answered Jun 28 '16 at 21:16

Ehsan

12,655
3
25
44

This isn't really a scalable answer. Using `writeNumbers(this)` probably would be a better approach. Along with that nothing is explained. – Spencer Wieczorek Jun 28 '16 at 21:24
@SpencerWieczorek , Tank you ,fix it. – Ehsan Jun 28 '16 at 21:34
@increda_jaw remove dot of end addEventListener("click", document.write("7").); – Ehsan Jun 28 '16 at 21:46
@ehsan Thanks a lot for this, it's exactly what I was looking for! I'm trying to make sense of how the functions work: So far I've got that the var txt is fed by what is stated in the "text" input field. However to get that the var number equals which number button is pressed (el.innerHTML linking to the text inside the button HTML tags. Then var txt is set to a number by txt.value which equals itself (which will be what the default value of the "text") – increda_jaw Jun 30 '16 at 19:39
plus var number.. So as the buttons are pressed, the value inside the HTML tags is printed in the "text" input field. As for c() - var txt is standard value of "text" input field and txt.value sets the entry to a number and ="" sets the entry to blank as there's nothing inside the speech marks. I have made txt.value = "0" so 0 is entered when C button is pressed. Thanks again for the answer, I appreciate it! I'm interested in learning more on how (this) in HTML links to (el) in the javascript - can you suggest any further reading on this? – increda_jaw Jun 30 '16 at 19:52
@increda_jaw , You're welcome.I use websites to learn.tankyou – Ehsan Jun 30 '16 at 20:14

Is there a way to use html buttons to add text or number values to an input field using javascript

1 Answers1