有没有办法使用html按钮使用javascript将文本或数字值添加到输入字段

时间:2016-06-28 21:08:47

标签: javascript html forms button

基本上我试图创建一个看起来像简单计算器的页面。我可以使用html按钮,单击时在输入字段中添加一个数字,然后当单击另一个按钮时,另一个数字将添加到字符串中。
这是我用来设置按钮的html和" text"进入领域。函数writeNumbers是我打算编写JS代码以使其工作的地方。任何有关如何设置此功能的想法都将受到欢迎!

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

我正在考虑在文本中添加文字到&#34; p&#34;元素&#39;演示&#39;如下所示,但认为这是不切实际的

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

我还尝试过使用带有document.write链接的按钮的事件监听器,但是这个号码不会输入到框中。不要认为document.write可以与输入字段一起使用。另外,下面的代码不是一个精确的摘录

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

尝试使用下面链接中的javascript代码,它似乎很理想,如果我添加它可以工作

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

我希望这有助于澄清目标是什么,请问你们是否需要其他任何东西

1 个答案:

答案 0 :(得分:1)

这有助于您:

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