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

これにより、第2の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にステータスを追加しませんでしたが、それはちょうど食品飲料を得ることと同じです。第2のコードスニペットについて

(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" />

Answer 2

、フォーム/ページにdivを加えます。以下のJS関数は、パラメータが渡されたウィンドウのonloadの値をdivに更新します。 divは、クエリ文字のパラメタが両方とも存在する場合にのみ更新されることに注意してください。

  <div id="showdata"></div> 

     <script type="text/javascript"> 
      window.onload = passParameters; 

      //Function to update "showdata" div with URL Querystring parameter values 
      function passParameters() { 
       var foodbeverage = getParameterByName("foodbeverage"); 
       var status = getParameterByName("status"); 
       if (foodbeverage != null && status != null) {     
        var data = "<b>Food Beverages:</b> " + foodbeverage + " <b>Dine Takeaway:</b> " + status; 
        document.getElementById("showdata").innerHTML = data; 
       } 
      } 
      //Get URL parameter value 
      function getParameterByName(name, url) { 
       if (!url) url = window.location.href; 
       name = name.replace(/[\[\]]/g, "\\$&"); 
       var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 
        results = regex.exec(url); 
       if (!results) return null; 
       if (!results[2]) return ''; 
       return decodeURIComponent(results[2].replace(/\+/g, " ")); 
      } 
     </script> 

[JavaScriptにjqueryのコードを変換する簡単な方法はありますか？]（の