使用 Javascript 按鈕更改搜索文本
[英]Changing search text with Javascript Buttons
問題描述
我知道這看起來很簡單而且過時了，但我在任何地方都找不到合適的例子。
我的目標是通過在用戶使用 javascript 輸入的任何內容的開頭添加文本來編輯我的搜索欄。
例如，用戶輸入“Pie”，搜索欄下方有三個按鈕，用戶可以選擇“Apple”、“Banana”或“Squash”。 單擊任何按鈕時，它應該將文本添加到餅圖的開頭，例如，單擊“香蕉”會導致使用“香蕉餅”修改搜索欄。
我只是想學習如何在 JS 中做到這一點，如果有人能指點我到合適的地方看，我在任何地方都找不到合適的例子，我將不勝感激。
3 個解決方案
解決方案1
0 2020-02-17 03:17:09
如果你有一個輸入元素：
<input type="text" id="userInput">
然后你可以得到它的價值：
let userInput = document.getElementById("userInput").value;
在按鈕的事件處理程序中，您可以只進行字符串連接：
// In your button click event
let outputString = buttonValue + " " + userInput;
解決方案2
0 已采納 2020-02-17 03:18:00
檢查這個。
function SetValue(ts) { var txt = document.getElementById("searchabar"); var n = txt.value.indexOf(":"); var text = txt.value; if (n > 0) { var text = txt.value.substring(n + 1); } txt.value = ts + ":" + text; }
<!DOCTYPE html> <html lang="en"> <head></head> <body> <input type="" name="" placeholder="Search bar" id="searchabar"> <input type="button" name="" value='Apple' onclick="SetValue('Apple')"> <input type="button" name="" value='Squash' onclick="SetValue('Squash')"> <input type="button" name="" value='Banana' onclick="SetValue('Banana')"> <script type="text/javascript"> </script> </body> </html>
解決方案3
0 2020-02-17 03:18:28
您可以按以下步驟執行此操作：
- 在 html 中創建按鈕並給它們相同的類。
- 在 javascript 中訪問它們並向它們添加 onclick 偵聽器。
- 更改該函數中
input的值。
const input = document.getElementById('test'); document.querySelectorAll('.fruit').forEach(fruit => { fruit.onclick= function(){ input.value = `${fruit.innerText} ${input.value}` } })
<input id="test" type="text" /> <button class="fruit">Apple</button> <button class="fruit">Banana</button>
JavaScript中的按鈕文字沒有變化？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.