我的结帐页面的前端有一个woocomerce表单几个字段，我试图链接到一个OpenStreetMap API作为一个插件。然而，在加载.js脚本并激活插件后，每当我加载结帐页面时，我都会得到一个
未捕获的类型错误：未捕获的类型错误：无法在geocoding.js？ver=1.0：8：26设置null的属性（设置'onclick'）
下面是我使用的代码：

// Get the Place Order button
var placeOrderButton = document.getElementById('place_order');

// Check if script has been loaded successfully
console.log('Geocoding script loaded.');

// Add an event listener to the button
placeOrderButton.onclick = function() {
  // Get the form data
  var formData = {
    country: document.querySelector('input[name="billing_country"]').value,
    street: document.querySelector('input[name="billing_address_1"]').value,
    city: document.querySelector('input[name="billing_city"]').value,
    county: document.querySelector('input[name="billing_state"]').value,
  };

  // Construct the URL with the form data
  var url = 'https://nominatim.openstreetmap.org/search?' + 'q=' + formData.street + ', ' + formData.city + ', ' + formData.county + ', ' + formData.country + '&format=json';

  // Send the API request
  fetch(url)
    .then(response => response.json())
    .then(data => {
      // Get the latitude and longitude values from the response
      var lat = data[0].lat;
      var lon = data[0].lon;

      // Do something with the latitude and longitude values
      console.log('Latitude: ' + lat);
      console.log('Longitude: ' + lon);
    })
    .catch(error => {
      // Log any errors that occur
      console.error('Error:', error);
    });
};

错误语句突出显示了代码的“function（）{”部分。我已经尝试使用字段名称以及安装第三方结帐页面管理器来获取元素ID，但错误仍然存在。我可能做错了什么
预期的输出是浏览器开发者工具的控制台选项卡中的纬度和经度坐标。我怀疑这可能是woocommerce结帐表单元素的错误标识的问题。所以如果你可能知道如何获得实际的woocommerce结帐表单元素ID，我想它应该会有所帮助。