是否有一种方法使用html按钮添加文本或数字值的输入字段使用javascript

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

本文关键字：文本 数字 javascript 字段 输入 添加 html 是否 方法 一种 按钮      更新时间：2023-09-26

基本上我想做一个页面，看起来和工作起来像一个简单的计算器。我可以使用html按钮，当点击添加一个数字到输入字段，然后当另一个按钮被点击，另一个数字添加到字符串。
这是我用来设置按钮和"文本"输入字段的html。函数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>

我正在考虑使用添加文本到文本的"p"元素与'demo' id如下，但认为这是不切实际的

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

我还尝试过为带有文档的按钮使用事件侦听器。写链接的东西，但数字不会被输入到框。不要思考文档。Write可用于输入字段。另外，下面的代码不是一个确切的摘录

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

尝试使用javascript代码在下面的链接，它似乎是理想的，可以工作，如果我添加到它

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

我希望这有助于澄清的目的是什么，请问如果你们需要什么

这对你有帮助:

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

相关文章：