JS: Seçme tipine göre giriş tipini değiştirir misiniz?

Question

Metin (type = "text") sağlayan 2 girişli bir seçim kutunun yanında bir giriş kutusu var. Seçim kutusunun ilk seçeneği "adres" (varsayılan olarak seçili olarak işaretlenir), ikincisi "mesafe" dir. İlk seçenek giriş tipinin metin olmasını gerektiriyorken, ikincisi sadece sayıları gerektirir ...

Kullanıcı, "Distance" seçeneğini bir seçenek olarak tıkladığında, girişin giriş tipini değiştirecek şekilde yapmak istiyorum. = "number" yazısının yanındaki kutuya. Etrafa google'dan

<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> 

, ben bu öğrenmek için görünmüyor olabilir ... Ben daha önce burada giriş ve JS ilgili birkaç soru sordunuz, ben de onları yakala gerektiğini biliyorum onların Kimlikler. Bundan sonra gerçekten bilmiyorum.

Sözde kod: Sağ yol boyunca

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

mıyım? Herhangi bir yardım takdir edilir.

jQuery'den uzak kalmak istiyorum.

Answer 1

selectBox.value yeterlidir .. value dize olacaktır ve selected olarak özelliği yok. Aynı yerine 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

deneyin setAttribute

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