我在 html 中設定了以下內容
<input maxlength="1" type="number" min="1" max="4" id ="c0r0"></input>
這有一個文本框，如果我選擇一個我想要在我的 js 檔案中作為變數的數字，我可以在其中選擇一個數字 1 到 4
我在我的 js 檔案中試過這個：
var tt = document.getElementsByTagName("input")[0].value;
console.log(tt);
我需要它 tt var 等于輸入。我需要添加一個按鈕來提交我的輸入嗎？或者一旦我選擇 1 到 4，我的 js 檔案就可以獲取該值
uj5u.com熱心網友回復：
您可以嘗試更改：
<input maxlength="1" type="number" min="1" max="4" id ="c0r0"></input>
到 ：
<input maxlength="1" type="number" min="1" max="4" id="c0r0" />
uj5u.com熱心網友回復：
我想指出這兩點
<input type="number">元素并不是真正為“選擇”值而設計的。盡管您當然可以使用一些自動完成庫來幫助您。元素可能是該<select>任務更自然的選擇。- 您可以輕松設定所需的變數。事實上，我建議創建一個
const：
const tt=document.querySelector("input");
// the "variable" you require is then tt.value:
console.log(tt.value)
在“真實”應用程式中，您可能應該使用更具體的 CSS 選擇器，例如類或標識。
uj5u.com熱心網友回復：
以下是執行此操作的兩種簡單方法。
方法一：
將更改事件偵聽器附加到輸入元素，即每次值更改時呼叫的函式。然后使用事件的目標屬性來獲取值。有關更多詳細資訊，請閱讀此onchange 事件
方法二
getElementById使用（閱讀更多）獲取 html 元素參考，然后使用該元素訪問該值。
注意：使用getElementById很簡單，因為您獲取目標元素，而其他方法回傳一個集合，您必須在集合中找到關注的元素。
下面是上述推薦方法的一個小demo
function getValue(event) {
// Method 1
var val = event.target.value
console.log('first box:' val);
}
function method2() {
// Method 2
val = document.getElementById('c1r1').value;
console.log('second box:' val)
}<input maxlength="1" type="number" min="1" max="4" id="c0r0" onchange="getValue(event)" />
<input maxlength="1" type="number" min="1" max="4" id="c1r1" onchange="method2(event)" />轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/442467.html
標籤：javascript html
上一篇：隱藏選擇上的空行