如何將此jQuery代碼轉換爲JavaScript？

我在解決我以前的帖子時遇到了麻煩。我只有一個需要jQuery的解決方案，但我想用JavaScript代替。如何將此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>

來源

2017-08-25 cerberus99

的[有一種簡單的方法來jQuery代碼轉換爲JavaScript？（可能的複製https://stackoverflow.com/questions/978799/is-there-an-easy-way-to-convert- jquery-code-to-javascript） – Maxim

這兩個代碼片段之間的區別在哪裏？ –

嘗試通過https://www.w3schools.com/jsref/prop_text_value.asp –

我已經轉換了第一個片段的原生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" />

來源

2017-08-25 07:12:45 Thijs

謝謝一堆，男人。我意識到我必須改變'console.log'。非常抱歉。 – cerberus99

我已經列出了一些步驟來解決你的新問題，我希望它能幫助你找出下一步該做什麼。 – Thijs

對於第二代碼段，添加到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>

來源

2017-08-25 07:39:23

如何將此jQuery代碼轉換爲JavaScript？

回答

相關問題