您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計疑難解答

JavaScript 獲取 input 值：onclick 事件中正確取值姿勢

編輯：程式設計疑難解答

問題場景

HTML 結構：

<dd class="shul">
    <div class="nober"><input type="text" placeholder="0" value=""></div>
</dd>
<dd class="gwc1">
    <a href="javascript:;" onclick="Add(this);"></a>
</dd>

需求：點擊 `` 標籤時，在 `Add` 函數中獲取同層 `` 的值。

核心難點

onclick="Add(this)" 傳入的是觸發事件的 `` 元素本身 (`this` 指向 ``)，而非 ``。需通過 DOM 遍歷找到目標輸入框。

三種解決方案

方案一：給 input 添加 id（最簡單、最穩健）

<input type="text" id="qtyInput" placeholder="0" value="">

<script>
function Add(aTag) {
    var val = document.getElementById('qtyInput').value;
    console.log('輸入值：', val);
    // 業務邏輯...
}
</script>

優點：直接定位，不依賴 DOM 結構變化。缺點：若頁面有多組同結構，id 會重複，需改用 class + 遍歷。

方案二：jQuery 就近查找（適配多組重複結構）

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function Add(aTag) {
    // $(aTag) 是被點擊的 
    // .prev() 找到上一個同級元素 
    // .find('input') 向下查找 input
    var val = $(aTag).prev().find('input').val();
    console.log('輸入值：', val);
}
</script>

優點：無需 id，復用性強。缺點：依賴 jQuery，且強依賴 HTML 結構順序 (`.prev()` 假設 input 在上一個 `

` 中)。

方案三：原生 JS 就近查找（無依賴）


function Add(aTag) {
    // 1. 找到父節點  (假設 dd 同屬一個 dl)
    var dl = aTag.closest('dl');
    // 2. 在 dl 內查找 input
    var input = dl.querySelector('input[type="text"]');
    var val = input ? input.value : '';
    console.log('輸入值：', val);
}

優點：無第三方庫，`closest` + `querySelector` 語義清晰。缺點：IE 不支持 `closest` (需 Polyfill)。

最佳實踐建議

優先用 id + document.getElementById：單一實例、結構固定時最可靠。
列表/重複結構用 class + 事件委託：父容器綁定一個 click 事件，通過 event.target.matches('.add-btn') 判斷，再 closest('.item-row').querySelector('input') 取值，性能更優、代碼更乾淨。
避免內聯 onclick：現代開發推薦 addEventListener 分離結構與行為，便於維護與 CSP 合規。

代碼重構示範（事件委託版）

<dl id="goodsList">
    <dd class="item">
        <div class="nober"><input type="text" class="qty" placeholder="0"></div>
        <a href="javascript:;" class="add-btn">加入購物車</a>
    </dd>
    <!-- 更多 item -->
</dl>

<script>
document.getElementById('goodsList').addEventListener('click', function(e) {
    if (!e.target.matches('.add-btn')) return;
    var input = e.target.closest('.item').querySelector('.qty');
    var val = input.value.trim();
    if (!val) return alert('請輸入數量');
    console.log('添加商品，數量：', val);
    // AJAX 提交等...
});
</script>