javascript - 谷歌自动完成放置搜索错误不是 HTMLInputElement 的实例

Question

当用户单击按钮时，我正在动态创建新的输入字段。我将与自动完成工作的输入相同的属性分配给新输入字段。出于某种原因，它总是给出相同的错误：不是 HTMLInputElement 的实例。

当用户单击按钮时，用于创建新输入元素的函数：

let count = 0;

function addLocationInput ()  {
  count = count + 1;

  let form = document.getElementById("form_location_input");

  const newDiv = document.createElement("input");
  
  
  form.appendChild(newDiv);

  newDiv.setAttribute("style", "position: relative; margin-left: 25px; margin-top: 15px; width: 270px; height: 40px; border-radius: 20px; text-align: center;");
  newDiv.setAttribute("class","form-control form-control-user pac-target-input");
  newDiv.setAttribute("type","text");
  newDiv.setAttribute("id",`next-location-${count}`);
  newDiv.setAttribute("placeholder","Next Location");
  newDiv.setAttribute("name","Next location");
  newDiv.setAttribute("autocomplete","off");

  let nextLocation = document.getElementById(`next-location-˘${count}`)
  let locationAutocomplete = new google.maps.places.Autocomplete(nextLocation);

}
document.getElementById("add-waypoint").addEventListener("click", addLocationInput);

工作输入元素：原点

<input style="position: relative; margin-left: 25px; margin-top: 15px; 
width: 270px; height: 40px; border-radius: 20px; text-align: center;" 
class="form-control form-control-user pac-target-input" type="text" 
id="origin-input" placeholder="Origin location" name="origin_location" autocomplete="off">

目的地

<input style="position: relative; margin-left: 25px; margin-top: 15px; 
width: 270px; height: 40px; border-radius: 20px; text-align: center;" 
class="form-control form-control-user pac-target-input" type="text" 
id="destination-input" placeholder="Destination location" name="destination_location" autocomplete="off">

和动态创建的输入，只有这个是在 div 内部创建的，但我是通过输入的 id 而不是 div 获得的。

<div id="form_location_input">
<input style="position: relative; margin-left: 25px; margin-top: 15px; 
width: 270px; height: 40px; border-radius: 20px; text-align: center;" 
class="form-control form-control-user pac-target-input" type="text" 
id="next-location-1" placeholder="Next Location" name="Next location" autocomplete="off"></div>

标签： javascripthtmlcss