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 );
}