javascript - 只是想看看是否有一种方法可以将字符串变量连接到 onclick 函数上？

Question

所以我有这段代码可以从邮政编码中获取地址列表。它通过使用来自 api 的 GET 函数来完成此操作。当返回 JSON 数据时，我将其拆分，现在我在一个函数中有一个 javascript 数组来操作 DOM 以添加一个下拉菜单，用户可以从中选择他们的地址

我目前正在使用一个下拉菜单，用户可以从地址列表中选择他们的地址和一个点击功能(这是我遇到问题的部分)。一个函数应该从中填充其他字段(现在这不是一个问题)。抱歉，这是一个糟糕的解释，但发生了很多事情!

    var soil = new XMLHttpRequest();
    var a="";
    
    function findAddress (){
        stuff = document.getElementById("postcode").value;
        soil.open("GET", "https://api.getaddress.io/find/"+stuff+"?api-key=x", false);
        soil.send(null);
        var r = JSON.parse(soil.response);
    
        var x = document.getElementById("address");   // Get the element with id="demo"
        var str="";
        x.innerHTML+="<div class=dropdown> <button onclick=myFunction() class=dropbtn>Dropdown</button>   <div id=myDropdown class=dropdown-content>";
        var y = document.getElementById("myDropdown");
        for (i=0;i<r.addresses.length;i++){
            a=r.addresses[i];
            y.innerHTML+="<a onclick=submitAddress(a)>" + r.addresses[i] + "</a>";
        }
        x.innerHTML+="</div>";
        x.innerHTML+="</div>";
    }
    function submitAddress(a){
        
        var x = document.getElementById("address");   // Get the element with id="demo"
        x.innerHTML = "";
        document.getElementById("houseNum").value = a;
    }
    
    function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }
    
    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
    
    
    

<select>
    <option type="submit" value="mr">Mr</option>
    <option type="submit" value="mrs">Mrs</option>
    <option type="submit" value="ms">Ms</option>
    <option type="submit" value="miss">Miss</option>
    <option type="submit" value="dr">Dr</option>
 </select><br><br>
    
    
    <label>First Name<span style="color:red;">*</span>:</label>&nbsp;
    <input type="text" class="payment_firstname" name="firstname" required><br><br><br>
    <label>Surname:</label>&nbsp;
    <input type="text" class="payment_lastname" name="lastname"><br><br><br>
    <label>Email Address<span style="color:red;">*</span>:</label>&nbsp;
    <input type="text" class="payment_email" name="email" required><br><br><br>
    <label>Confirm Email<span style="color:red;">*</span>:</label>&nbsp;
    <input type="text" class="payment_cemail" name="cemail" required><br><br><br>
     <label>Telephone:</label>&nbsp;
     <input type="text" class="payment_telephone" name="Telephone" ><br><br><br>
    <label>House Name/No:</label>&nbsp;
    <input type="text" id="houseNum" class="payment_telephone" name="houseNum" ><br><br><br>
    <label>County:</label>&nbsp;
    <input type="text" id="houseCounty" class="payment_telephone" name="houseCounty" ><br><br><br>
    <label>Postcode:</label>&nbsp;
    
    <input type="text" id="postcode" class="payment_postcode" name="Postcode">&nbsp;<button onclick="findAddress()" style="height: 35px;">Find Address</button><br><br>
    

我得到的结果是属性的编号被放入函数中，而不是数组的完整索引字符串 -1 test crescent, test city, test county- 以及所有被输入的内容函数是第一个数

Answer 1

我不确定我是否做对了，但是要构建例如从数组中选择选项，您可以使用 map() 函数。 检查用户是否在选择中更改了地址您可以使用 onchange 事件而不是 onclick https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onchange

let addressesArray = [
"67-69 Shelton Street, , , , , London, ",
    "Aace Cleaning group limited, Shelton Street, , , , London, Greater London",
    "Annabelle Grace Events Management, 71-75 Shelton Street, , , , London, Greater London",
    "Apex Base Solutions, 71-75 Shelton Street, , , , London, "
]
let list = addressesArray.map( item => `<option>${item}</option>`);
var select = document.createElement('select');
select.innerHTML = list;
document.body.appendChild(select);