有没有办法使用 html 按钮使用 javascript 向输入字段添加文本或数字值 [关闭]答案

【问题标题】：Is there a way to use html buttons to add text or number values to an input field using javascript [closed]有没有办法使用 html 按钮使用 javascript 向输入字段添加文本或数字值 [关闭]
【发布时间】：2016-10-31 09:04:05
【问题描述】：

基本上，我正在尝试制作一个看起来和工作起来都像一个简单计算器的页面。我可以使用 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";

我还尝试使用带有 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

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

【问题讨论】：

您需要付出一些努力，向我们展示您尝试了哪些 JavaScript 以及失败的地方。

标签： javascript html forms button

【解决方案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>

【讨论】：

这不是一个真正可扩展的答案。使用writeNumbers(this) 可能是更好的方法。除此之外，没有任何解释。
@SpencerWieczorek，坦克你，修复它。
@increda_jaw 删除结束点 addEventListener("click", document.write("7").);
@ehsan 非常感谢，这正是我想要的！我试图理解这些函数是如何工作的：到目前为止，我已经知道 var txt 是由“文本”输入字段中所述的内容提供的。但是，要使 var 编号等于按下哪个数字按钮（el.innerHTML 链接到按钮 HTML 标记内的文本。然后 var txt 由 txt.value 设置为等于自身的数字（这将是默认值的“文本”）
plus var number.. 因此，当按下按钮时，HTML 标记内的值会打印在“文本”输入字段中。至于 c() - var txt 是“文本”输入字段的标准值，txt.value 将条目设置为数字，="" 将条目设置为空白，因为语音标记内没有任何内容。我已经设置了 txt.value = "0"，所以按下 C 按钮时输入 0。再次感谢您的回答，我很感激！我有兴趣了解更多关于 HTML 中的 (this) 如何链接到 javascript 中的 (el) - 您能建议对此进行进一步阅读吗？