javascript - 我需要帮助阅读这段代码以了解它在做什么，以便我可以将它转换为 javascript

Question

我想学习 JavaScript。我知道 jQuery 是 JavaScript 的库，但语法非常不同，我只需要一些帮助来阅读代码的作用，以便我可以使用 JavaScript 重新创建它。

我正在开发一个来自 youtube 教程的元素，该元素使用 jQuery Mobile 将元素添加到 WebSQL 数据库 我在教程中的某个时刻更新了我们输入的元素。该代码能够使用我们输入的信息填充更新表单。该代码运行完美，但它是在 jQuery 中，如果可能，我想将其更改为 JavaScript。您能帮我解释一下代码的实际作用以及如何将其转换为 JavaScript 吗？

更新表单的HTML代码

       <div data-role="header">           <h1>Update Product</h1>       </div>       <div data-role="main" class="ui-content">           <form>               <div class="ui-field-contain">                   <label for="newName" class="ui-hidden-accessible">Name</label>                   <input type="text" id="newName" data-clear-btn="true" placeholder="New Name"/><br/>                   <label for="newQuantity" class="ui-hidden-accessible">Quantity</label>                   <input type="number" name="number" pattern="[0-9}" id="newQuantity" value="" data-clear-btn="true" placeholder="New Quantity"/><br/>                   <button class="ui-btn ui-icon-plus ui-btn-icon-left"                           id="btnupdate" onclick="updateProduct()">Update</button>               </div>           </form>       </div>````    </div>JavaScript Code of populating the form and then updating the changes.````var currentProduct = {  id:-1,  name: "",  quantity:-1,````}````$(document).on('pagebeforeshow', '#updatedialog', function() { $('#newName').val(currentProduct.name); $('#newQuantity').val(currentProduct.quantity);});function updateProduct() { var newName = $('#newName').val(); var newQuantity = $('#newQuantity').val(); productHandler.updateProduct(currentProduct.id, newName, newQuantity);}

    databaseHandler.db.transaction(        function(tx){            tx.executeSql(            "Update product set name=?, quantity=? where id=?",             [newName, newQuantity, _id],              function(tx, results){},               function(tx, error){//todo: display this message to user                    console.log("Error updating product" + error.message);                 }               );        }    );}

我想用产品信息填充更新表单，更改表单上的任何信息并使用 JavaScript 而不是 jQuery 更新信息。

Answer 1

这是 jQuery 部分:

$(document).on('pagebeforeshow', '#updatedialog', function() {
    $('#newName').val(currentProduct.name);
    $('#newQuantity').val(currentProduct.quantity);
});

function updateProduct() {
    var newName = $('#newName').val();
    var newQuantity = $('#newQuantity').val();
    productHandler.updateProduct(currentProduct.id, newName, newQuantity);
}

下面是将它们转换为纯 JavaScript 的方法:

document.getElementById("updatedialog").addEventListener("pagebeforeshow", function() {
    document.getElementById("newName").value = currentProduct.name;
    document.getElementById("newQuantity").value = currentProduct.name;
});

function updateProduct() {
    var newName = document.getElementById("newName").value
    var newQuantity = document.getElementById("newQuantity").value
    productHandler.updateProduct(currentProduct.id, newName, newQuantity);
}