javascript - 如何将此 jQuery 代码转换为 JavaScript？

Question

我在解决我之前的帖子时遇到了问题。我只有一个需要 jQuery 的解决方案，但我想改用 JavaScript。

真的需要这方面的帮助。

上一篇文章(供引用):HTML - How To Display & Direct Selected Values From Drop Down Menu To A New HTML Page

这是第一个 jquery 代码。

<input type="submit" id="btngo" value="Go" />
<script type="text/javascript">
  $(function() {
    $("#btngo").bind("click", function() {
      var url = "Page2.htm?foodbeverage=" + encodeURIComponent($("#foodbeverage").val()) + "&status=" + encodeURIComponent($("#status").val());
      window.location.href = url;
    });
  });
</script>

这是第二个jquery代码。

< script type = "text/javascript" >
  var queryString = new Array();
$(function() {
  if (queryString["foodbeverage"] != null && queryString["status"] != null) {
    var data = "<b>Food Beverages:</b> " + queryString["foodbeverage"] + " <b>Dine Takeaway:</b> " + queryString["status"];
    $("#showdata").html(data);
  }
}); <
/script>

Answer 1

我已将第一个片段转换为原生 JS 等价物。我没有在 URL 中添加状态，这与获取食物饮料更相似。

(function() {
  /**
   * Handles the click of the submit button.
   */
  function onSubmitClicked(event) {
        // Get the input element from the DOM.
    var beverage = document.getElementById('foodbeverage'),
        // Get the value from the element.
        beverageValue = beverage.value,
        // Construct the URL.
        url = 'Page2.html?foodbeverage=' + encodeURIComponent(beverageValue) + '&status=test';

    // Instead of going to the URL, log it to the console.
    console.log('goto to URL: ', url);
  }
  
  // Get the button from the DOM.
  var submitButton = document.getElementById('btngo');
  // Add an event listener for the click event.
  submitButton.addEventListener('click', onSubmitClicked);
})();

<label>
Beverage:
<input type="text" id="foodbeverage"/>
</label>
<input type="submit" id ="btngo" value="Go" />