JS：根據選擇選項更改輸入類型？

Question

我有一個允許輸入文本的輸入框（type =“ text”），此外還有一個帶有2個選項的選擇框。 選擇框的第一個選項是“地址”（默認標記為選中），第二個選項是“距離”。 第一個選項要求輸入類型為文本，第二個選項僅要求數字...

我要這樣做，以便當用戶單擊“距離”作為選項時，它將旁邊的輸入框的輸入類型更改為type =“ number”。

<div class="row collapse-col connect-input">
    <div class="col-1-2">
        <input name="send_address" id="send-address" type="text" placeholder="Address">
    </div>
    <div class="col-1-2">
        <select name="send_dist_type" id="send-dist-type">
            <option value="address" selected>Address (Default)</option>
            <option value="distance">Distance (km)</option>
        </select>
    </div>
</div>

我到處搜索，似乎找不到答案...之前我在這里問過關於輸入和JS的幾個問題，所以我知道我需要用它們的ID來獲取它們。 在那之后，我真的不知道。

偽代碼：

function addressChange() {
    var inputBox = document.getElementById('send-address');
    var selectBox = document.getElementById('send-dist-type');
    if (selectBox.value.selected == 'distance') {
        inputBox.type.change = 'number';
    } else {
        inputBox.type.change = 'text';
    }
}

我在正確的道路上嗎？ 任何幫助表示贊賞。

我想遠離jQuery。

Answer 1

selectBox.value足夠.. value將是字符串，並且沒有selected屬性。 inputBox.type

 function addressChange() { var inputBox = document.getElementById('send-address'); this.value == 'distance' ? inputBox.type = 'number' : inputBox.type = 'text'; } document.getElementById('send-dist-type').addEventListener('change', addressChange); 

 <div class="row"> <div class="col-1"> <div class="row collapse-col"> <div class="col-1"> <label for="send-address"><b>Address/Distance</b> </label> </div> <div class="row collapse-col connect-input"> <div class="col-1-2"> <input name="send_address" id="send-address" type="text" placeholder="Address"> </div> <div class="col-1-2"> <select name="send_dist_type" id="send-dist-type"> <option value="address" selected>Address (Default)</option> <option value="distance">Distance (km)</option> </select> </div> </div> </div> </div> 

Answer 2

嘗試setAttribute代替

function addressChange() {
    var inputBox = document.getElementById('send-address');
    var selectBox = document.getElementById('send-dist-type');
    inputBox.setAttribute("type", selectBox.value );
}