获取文本框中按钮的值

Question

我正在尝试构建一个计算器，我想获得文本框中点击按钮的值

这只是一个例子我如何获得点击按钮的值

<input type="text" name="" id="textfield" placeholder="Text" class="Text" readonly><br>
<button class="Y" value="Y"  onclick="">Y</button>
<button class="A" value ="A" onclick="">A</button>
<button class="S" value ="S" onclick="">S</button>
<button class="I" value ="I" onclick="">I</button>
<button class="R" value ="R" onclick="">R</button>

Answer 1

这里你可以使用javascript来处理这种类型的功能。例如:

function appendValue(value) {
var textfield = document.getElementById("textfield");
textfield.value += value;
}

<input type="text" name="" id="textfield" placeholder="Text" class="Text" readonly><br>
<button class="Y" value="Y" onclick="appendValue('Y')">Y</button>
<button class="A" value ="A" onclick="appendValue('A')">A</button>
<button class="S" value ="S" onclick="appendValue('S')">S</button>
<button class="I" value ="I" onclick="appendValue('I')">I</button>
<button class="R" value ="R" onclick="appendValue('R')">R</button>

Answer 2

你不需要在按钮中设置value。检查这个JSFiddle

总之，这里有一个带有button值的方法的代码片段:

const buttons = document.querySelectorAll('button');
const input = document.getElementById("textfield");
let text = "";

buttons.forEach(btn => btn.addEventListener("click", () => {
text = text.concat(btn.value)
input.value = text;
}))

<input type="text" name="" id="textfield" placeholder="Text" class="Text" readonly><br>
<button class="Y" value="Y"  onclick="">Y</button>
<button class="A" value ="A" onclick="">A</button>
<button class="S" value ="S" onclick="">S</button>
<button class="I" value ="I" onclick="">I</button>
<button class="R" value ="R" onclick="">R</button>