Question

我正在更新产品，我能够让产品信息预先填写更新表格并使用jQuery更新产品信息，但我想使用JavaScript。如何将jQuery代码转换为JavaScript？

我正在在线学习教程，该人员正在使用jQuery，这很酷，但我想看看如何使用Javascript执行相同的方法。

JavaScript代码：

$(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);
}

HTML更新表格

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

更新表单应使用已经输入的产品信息填充，然后更新对字段所做的更改并将其保存为新对象。我可以在jQuery中完成此操作，但是我需要在Javascript中进行操作的帮助。

Answer 1

您目前正在使用jquery进行的所有操作似乎都是通过其ID获得输入元素的值。您可以使用javascript通过按ID选择表单元素并获取value属性来实现此目的。

val value = document.getElementById("elemID").value;

您的代码应如下所示

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

Answer 2

您可以使用文档尝试通过id获取元素的值

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

需要帮助将jQuery函数转换为JavaScript吗？

2 个答案: