[英]Multiple buttons that will change the one text field to the value of that button using the one function in javascript
okay so i have 10 buttons that are displayed 0 through to 9. There is a text field below that will display " button 3 is clicked" or "button 0 is clicked" depending on what button has been clicked and so on. 好的,所以我有10个按钮,显示的是0到9。下面是一个文本字段,该文本字段将显示“单击了按钮3”或“单击了按钮0”,具体取决于所单击的按钮,依此类推。 However i have to achieve this with one function so my code looks a little something like this. 但是我必须用一个函数来实现,所以我的代码看起来像这样。
<button onClick="changeNumber()">0</button>
<button onClick="changeNumber()">1</button>
<button onClick="changeNumber()">2</button>
<button onClick="changeNumber()">3</button>
<button onClick="changeNumber()">4</button>
<button onClick="changeNumber()">5</button>
<button onClick="changeNumber()">6</button>
<button onClick="changeNumber()">7</button>
<button onClick="changeNumber()">8</button>
<button onClick="changeNumber()">9</button>
<br/>
<br/>
<input type="text" id="garlicBread1" size="50%">
Im not sure how to make function changeNumber() 我不确定如何使函数changeNumber()
You can use something like this. 您可以使用类似这样的东西。 You can pass the reference of the element to the event handler and later use that to get the innerHTML
您可以将元素的引用传递给事件处理程序,然后使用它来获取innerHTML
function changeNumber(elm) { document.getElementById('garlicBread1').value = 'button ' + elm.innerHTML + ' is clicked'; }
<button onClick="changeNumber(this)">0</button> <button onClick="changeNumber(this)">1</button> <button onClick="changeNumber(this)">2</button> <button onClick="changeNumber(this)">3</button> <button onClick="changeNumber(this)">4</button> <button onClick="changeNumber(this)">5</button> <button onClick="changeNumber(this)">6</button> <button onClick="changeNumber(this)">7</button> <button onClick="changeNumber(this)">8</button> <button onClick="changeNumber(this)">9</button> <br/> <br/> <input type="text" id="garlicBread1" size="50%">
You may like to use querySelectorAll
and and attach event listener to the button instead of adding onclick
to each & every button. 您可能想使用querySelectorAll
并将事件侦听器附加到按钮,而不是将onclick
添加到每个按钮。 Then use template literal to create the string and attach it to the value of the input 然后使用模板文字来创建字符串并将其附加到输入的值
let getButtons = document.querySelectorAll('button').forEach((item) => { item.addEventListener('click', function(e) { let txt = e.target.textContent document.getElementById('garlicBread1').value = `button ${txt} is clicked` }) })
<button>0</button> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <button>7</button> <button>8</button> <button>9</button> <br/> <br/> <input type="text" id="garlicBread1" size="50%">
agree with dk, just use it like this 同意dk,就这样使用它
<button onClick="changeNumber()">0</button>
<button onClick="changeNumber(1)">1</button>
<button onClick="changeNumber(2)">2</button>
<button onClick="changeNumber(3)">3</button>
<button onClick="changeNumber(4)">4</button>
<button onClick="changeNumber(5)">5</button>
<button onClick="changeNumber(6)">6</button>
<button onClick="changeNumber(7)">7</button>
<button onClick="changeNumber(8)">8</button>
<button onClick="changeNumber(9)">9</button>
<br/>
<br/>
<input type="text" id="garlicBread1" size="50%">
and in your function 而在你的职能
function changeNumber(number){
console.log(number);
}
Well, you can do something like this: 好吧,您可以执行以下操作:
<button onClick="changeNumber(0)">0</button>
<button onClick="changeNumber(1)">1</button>
<button onClick="changeNumber(2)">2</button>
<button onClick="changeNumber(3)">3</button>
<button onClick="changeNumber(4)">4</button>
<button onClick="changeNumber(5)">5</button>
<button onClick="changeNumber(6)">6</button>
<button onClick="changeNumber(7)">7</button>
<button onClick="changeNumber(8)">8</button>
<button onClick="changeNumber(9)">9</button>
<br/>
<br/>
<input type="text" id="garlicBread1" size="50%">
<script>
function changeNumber(val){
document.getElementById("garlicBread1").value =
val + "clicked";
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.